2010年04月23日

zoomを使うとlist-style-typeがおかしくなる

こんばんわ、おひさしぶりです。
溝上です。
なんだかひさしぶりにブログを書く気がします。

そんなわけで今回は軽くリハビリがてら、
最近遭遇したIEのバグについてお話したいと思います。

それでは早速サンプルをご覧ください。
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 6.0のものです。残念です。
(htmlコーディング)
<ol class="number">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  <li>たちつてと</li>
</ol>
<ol class="alphabet">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  <li>たちつてと</li>
</ol>
(cssサンプル)
li{

zoom:1;

}
ol {

margin-left:30px;

}
.number li {

list-style-type:decimal;

}
.alphabet li {

list-style-type:lower-alpha;

}

こちらのバグはIE6で
liタグにzoomが指定されていると
list-style-typeの表示がおかしくなる

というものです。
サンプルでは本来「1,2,3,・・・」と成るべき箇所がすべて「1」になっています。

それでも「IE6ならもういいのではないだろうか?」などと思わないでもありません。
しかし残念なことにこのバグはIE7でも発生します。
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 7.0のものです。本当に残念です。

そんなわけで対策です。
対策方法としてはそもそもzoomを使わなければいいのですが
floatのclearの為などに意外とzoomって使われます。

zoomを指定したままで、解決するためにはzoomが指定されたliにdisplay:list-item;を指定してやれば解決します。
(cssサンプル)
ol li {

display:list-item;

}
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 6.0のものです。

これで万事解決!と思いたいところですが、実はまだバグは残っています。
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 6.0のものです。
(htmlコーディング)
<ol class="number">
  <li>あいうえお<br />
  ああああ<br />
  aaaaa</li>
  <li>かきくけこ</li>
      ・
      ・
      ・
liタグにzoomが指定されているとlist-style-typeの表示がテキストの改行に合わせて下がるというバグです。
これはひどい。

このバグを解決するにはliにvertical-align:topを指定すればなんとかなります。
(cssサンプル)
ol li {

display:list-item;
vertical-align:top;

}
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 6.0のものです。

なんとかなりました。
zoomを指定する際、liにはご注意ください。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 08:45 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。