IE-win / バグメモ

Tuesday, Sep 13, 2005 - 05:25 +09:00

対応の必要に迫られるのは、IE 5.0/5.5/6.0の3つ。
NNと違って、バージョン4世代以前は無視しても大きな問題はない。

バグ・リスト

※ このエントリは随時加筆・修正されます。

バグ・メモ

li要素の背景画像が表示されない
親要素に「position: relative;」を指定していると、その子要素にあたるliに背景画像が適用されない。正確には、ロード時には表示されないが画面切り替え等によって不規則に表示される、不完全な適用となる。「position: absolute;」では問題なし。孫要素でも問題なし。
DOCTYPE宣言を最上部に置かないと互換モードになる （IE6）
これが問題となるのは、主にXHTMLでXML宣言を記述する時。XHTMLの仕様では、HTML文書の先頭でXML宣言を記述しなければならない。ただ、IE6は互換モードの方が表示が速いため、テーブルや画像を多く使うサイトでは敢えて互換モードを選択する場合もある。IE6の互換モードはIE5.xに似た挙動を示すため、IE5対策の手間も省ける。
ボックスが小さくなる （IE5.0/5.5）
CSSの仕様に対するIEの間違った解釈。「width」はCSS2の仕様ではコンテンツ領域のみの値。それがIE5.xだと、「padding」と「border」を含んだ値となります。対策としては、「width」と「padding/border」を同時に指定しないこと。あるいは、Hackを使用してIE5.ｘ用の値を別に指定することが挙げられます。
文字サイズが一回り大きくなる （IE4～5.5/Mac版IE4）
IE5が、本来はデフォルト・サイズを表す「font-size="3"」を、キーワードで下から３つ目の「small」として解釈するため。これは文字サイズをキーワード以外で指定すれば問題ない。フォントサイズをキーワードで指定したい場合は、IE5.x用に偽の値を用意する必要がある。
「margin:auto」でセンタリングできない （IE4～5.5）
CSSの仕様では、要素のセンタリングには左右マージンの値を「auto」にする手法が勧められている。この手法は非推奨の<center>タグに代わる方法として一般的になっているが、IE5.x以前では無効。IE5.x↓でもボックスの中央揃えを実現するためには、<body>要素に「text-align:center」を指定する必要がある。
<a>要素を「display:block」にすると改行が入る （IE5/6）
<a>要素の「display:block」はリンク領域を横幅いっぱいにするための指定。リスト内のアンカーに対して使用すると、IEではもれなく改行がついてくる。これは「width:100%」などと幅を指定してやれば回避できます。IEはボックス関連にバグが多いが、その殆どは「width/height」の指定で回避できる。
幅をパーセント指定したfloatの段組が崩れる （IE5～6/Mac版IE5.x）
リキッドレイアウトを組もうとしたときに良くぶつかる問題。パーセント値をピクセルに変換する部分に問題があるらしく、合計が100%になる段組は巧く表示されない。回避策は、合計値を少なくすること。合計97%程度でも表示が崩れる場合がある。ホワイトスペースだと割り切った柔軟なレイアウトが必要。
PNG画像が巧く表示されない （Windows版のIE）
正確には、PNG画像の透過処理に対応していない。バージョン４以後のブラウザで透過PNGに対応していないブラウザはWindows版のIEだけ。透過PNGを使うなら、Hackを利用してIEだけGIFやJPG画像に換えたほうがよいだろう。
text-indentが背景画像にも適用される（IE5.0）

CSSでテキストを画像に置き換える際に生じる、悩ましい問題。たとえば「text-indent: -20000px;」などとしてテキストだけ画面外に飛ばした場合、IE5.0だけ背景画像も一緒に引っ張って言ってしまう。IE5.5では平気なだけに性質が悪い。特にナビゲーションやリンクテキストを置き換えるときには、注意が必要だ。場合によってはa要素に「display: block;」を指定していても、リンク領域ごと引っ張っていくこともある。

対応策はいくつかある。text-indentと同時に「position: absolute;」を設定する方法、「background-position: right;」を指定する方法、ずれることを前提に「background-repeat: repeat-x;」を指定する方法など。ただしどの方法も、効くときと効かないときと使えない場合がある。

posted in HTML/CSS Trackback (0)

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/60

« Previous Entry - Next Entry »