zoomプロパティとol要素の表示（バグ）

Internet Explorerの独自拡張であるzoomプロパティをつかうと、以下のようなバグがある。

• 番号が1しかつかなかったり
• 番号表示が消える

番号が1しかつかなくなるのは、IE5.5以上。

<ol>
<li>１番目のリスト</li>
<li>２番目のリスト</li>
<li>３番目のリスト</li>
</ol>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

に以下のようなCSSを適用した場合。

li{
        zoom : 1;
}

これをIE7,IE6,IE5.5,IE5.0で閲覧したときは以下のようになる。

IE7

IE6

IE5.5

IE5

番号表示が消えてしまうのはIE6とIE7。HTMLは先ほどと同じモノを使い、CSSの指定を、以下のようにする。

ol{
        zoom : 1;
}

IE7

IE6

IE5.5

IE5.0

IE5.5の挙動を見る限り、数字表示部分がずれているがこれとも関係するのか？

IE6とIE7で消えてしまった番号を出すために、左側にpaddingをとる。

ol{
        zoom : 1;
        padding-left : 2em;
}

IE7

IE6

ユニバーサルセレクタでzoom : 1;とした場合は、li要素、ol要素とも含まれるので、IE6とIE7では、両方のバグを抱えることになる。これを解消するために、以下のようなCSSを記述する。

*{
	zoom : 1;
}
ol{
	padding-left : 2em;
}
ol li{
	zoom : normal;
}

ブラウザの余白リセットを要素ごとにリセットする場合でも、olとliは含めていると思うので、そのついでに、zoom : 1;と書いてしまうとやはり表示がおかしくなる。この場合も、ユニバーサルセレクタでの対応と同じようにCSSを記述する。

なお、今回確認した環境は、以下の通り。

• WindowsXP + IE7 （メインマシン）
• WindowsXP + IE6 （VMWare）
• WindowsMe + IE5.5 （VMWare）
• Windows2000 + IE5.0 （VMWare）