この間IE6でこのサイトを見る機会があったので見てみたら、いやぁがっかり。(´･ω･`)
Macで作ったサイトをWinでみるとがっかりするってのは非常によく分かります。フォントとか色とかレイアウトとかいろいろ。
ざっとIE6で確認してみた感じ以下の不具合を発見。（じっくり見れてないのでまだたくさんあるかもしれない）
- 一部の透過pngの処理
- 全体が左寄り
- 画像のボーダーが表示されない
- CSS Sprite画像が乱れる
案外レイアウトの崩れがなかったのが不幸中の幸い。
透過pngは、iepngfixのCSSを指定し忘れてただけなので、さくっと修正。
全体が左寄りのレイアウトになってるのと画像のボーダーが表示されないのは、どうやらIE6の後方互換モードの弊害らしい。
ブロックレベル要素をセンタリングするには、センタリングしたい要素の左右に値が auto の margin を設定します。Windows IE は後方互換モードで値が auto の margin が無効になります。
via: 標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
なるほどね。全体が左寄りだったのは、こいつが原因だったわけね。んで、IEが互換モードになってしまうのは、DOCTYPE宣言の前にXML宣言を書いていたりするとなるらしい。んじゃあXML宣言を書かなきゃいいじゃんってなるけど、XHTMLで作ってるとXML宣言した方がいいよね、第一IE6のために書かないってのもアレだし…というジレンマ。
しかしまぁここはWordpressなんで、UA見てIEだったら書かないように、それ以外だったら表示させるって感じにして対応しました。確認してないけど多分大丈夫でしょう。
これで一段落かな。
CSS Spriteの画像が乱れるっていうのは、未対応ですが、まぁそこは早くIE6からVerUPしてくれっていうこちら側のメッセージとして残しておきましょう。w
っていうかIEシリーズというブラウザのようなものはホントになくなってほしいですね。XPからVistaまでの空白の時間にIEのテコ入れしなかったMSはホント悪い子。
