IE6だけ要素・テキストが複製される（ダブる）バグ
またマイナーバグネタ。
IE6のみ、入れたはずのない余分なテキストが、直前の要素を複製したように入ってしまうバグです。
▼参考画像
▼詳細は下記の通り
こいつの発生条件は2種類。
- 親divでfloatさせている要素（div＞テキスト入りdiv3つをfloat:leftとか。）のwidthの合計が、親divのwidthの値ときっちり一致している。（親div600px、div3つ200pxとか）
- floatさせている要素とfloatさせている要素の間にコメントアウト＜！ーーこんなやつーー＞がある。
上記のどっちかに当てはまる際はこれの可能性が濃厚。
（対応策）
合計きっちりのバグの際は、親divの幅を少し広げるなどして、一致させない。
コメントアウトのバグの際は、対象のコメントアウトを取っ払う。
こんな感じで対応すればOK。
ではでは。
IE6・7 a:hoverで親ブロック要素の高さが変わるバグ
標題のとおりのマイナーバグです。
デフォルトから:hover擬似クラスをつけた要素にマウスオンした瞬間に高さが増えてしまう。
そんな症状の際はコレみたいです。
▼詳細は下記の通り
http://css-bug.jp/win/ie/ver6/0259/
噛み砕いて言うと、
- 3重以上の入れ子
- aの2番目の親要素に(背景+ボーダー）or（背景+上下マージン）
- aの3番目の親要素に幅指定
ってな感じだと発生するようです。
div＞ul＞li＞a:hover
みたいな感じでulに背景とマージン（orボーダー）、親divに幅とかやるとコレにぶち当たります。
回避策は上記リンクに何個かあるけど、
”内側から3番目のブロックで幅を指定しない。”
が一番てっとり早い。
つまり、もう一個外にボックス追加して、そこに幅指定などを移植する。
まあIEの為だけにソース汚したくないので、上記のような組み方する場合はあんまりulで背景やマージン、ボーダーなど制御しないように気を付けた方がいいかも。
デジカメ写真→WEB用写真への変換一手間
クライアントから写真が送られてきて、
「この写真をHPに載せて欲しいんだけど」
的なこと、良くありますよね。
しかしながら、その全てがカメラに精通した方が撮った素材ではなく、ほぼほぼローキーorハイキーであったり、ピンぼけ気味だったり。。
そんな折にテンプレ的に下記工程を通してからWEBに載せるよう心がけております。
【画像加工：photoshop（cs3）、縮小専用。（フリーツール）使用】
- "縮小専用。"というツールを使い、一括で解像度、サイズ落とし。
- photoshopで上記素材を開き、Ctrl+Aで全選択。Ctrl+Vでレイヤーペースト。
- 画像が暗い場合は上記で追加したレイヤープロパティ（レイヤーウィンドウの上部の入力部分ぽいとこ）を"通常"→"スクリーン"へ。かかり具合は不透明度で調整。
- 画像が明るい場合は上記で追加したレイヤープロパティ（レイヤーウィンドウの上部の入力部分ぽいとこ）を"通常"→"乗算"へかかり具合は不透明度で調整。
- レイヤー-画像を統合。Ctrl+Aで全選択。Ctrl+Vでレイヤーペースト。
- 上記で追加したレイヤーにフィルタ-その他-ハイパスで半径1.0pxでフィルタがけ
- フィルタをかけたレイヤープロパティ（レイヤーウィンドウの上部の入力部分ぽいとこ）を"通常"→"ソフトライト"へ。かかり具合は不透明度で調整。
- 以上。書き出し。
こんな感じで、一枚3分位。
画像調整はやり出せばきりが無いわけですが、最低限コレをやっておけば、WEBサイトを1レベル上等に見せる事は出来ます。
他にも同様の処理が出来る工程はあったりしますが、簡単に調整が利いたり、加工後の自然度を考えると、こういった工程に落ち着きました。
一度お試しあれ。