デザインブログ

ホーム > Webデザイン > IEでのリストタグのバグ

IEでのリストタグのバグ

よくやってくれます。IE。

今回はリストタグに関するバグです。

1
<ol><li></li></ol>

とか

1
<ul><li></li></ul>

という、よく使うアレです。

今回遭遇したのは、リストが連番にならない。つまり「1.」がずっと続くバグです。

画像を見て分かるとおり、全て「1」。リストになっていません。

これは、CSSでolやliにwidthの指定を行った時に出るバグです。

回避方法は「widthに指定を行わないこと」ですが、どうしても指定したいと言う場合もあります。

そういう時は、olの親要素に指定すればOK。

1
2
3
4
5
6
<div style="width:600px;">
<ol>
<li>あめんぼあかいな</li>
<li>あめんぼあかいなあかいな</li>
</ol>
</div>

私が今回遭遇したのはulやらolが入れ子状態なので、正直、見直すのが面倒だった。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#faq  dl  dd  ul  {
margin: 0px 0px 24px;
padding: 0px;
width: 620px;
list-style: none;
}
#faq dl dd ul li {
background: url(../images/flow/faqBack.jpg) repeat-x;
margin: 0px 0px 24px;
padding: 2px 6px 0px;
width: 608px;
}
#faq dl dd ul li ul {
margin: 8px 0px;
padding: 0px;
list-style: none;
width: 608px;
}
#faq dl dd ul li ul li {
margin: 0px;
padding: 0px;
background: url(none);
width: 608px;
}
#faq  dl  dd  ul  li  ul  li ol {
margin: 0px;
padding: 0px 0px 0px 30px;
background: url(none);
width: 578px;
list-style: decimal;
}
#faq  dl  dd  ul  li  ul  li ol li {
margin: 0px;
padding: 0px 20px 0px 0px;
background: url(none);
list-style: decimal;
}

・・・ddタグの中にulのliが入り、その中に再びulのliが入って、トドメにolのliが入っている・・という設定ですが、この場合は、これらの設定からwidthの設定を削除しないと、バグります。

これらの親要素になるのはddなので、このタグにwidthの設定を入れれば一挙解決です。

ちなみに、この他にも色々バグがあり、

おさんぽさんぽ≫zoomプロパティとol要素の表示（バグ）

のバグ報告については、zoom:1を追加する事で回避しています。

こちらの記事もどうぞ

  1. CSSでbodyに設定した背景画像がIEでずれる怪
  2. Safari3も背景がずれる・・。

2010年3月29日5:51 PM| カテゴリー：Webデザイン| コメント：（0）

« ｜デザインブログトップ｜ »

トラックバック

トラックバックURL： http://www.m-r-design.com/mr-blog/archives/94/trackback

コメント

コメントをお寄せください。お気軽にどうぞ。

コメントの投稿

コメントフィード