IEでのリストタグのバグ

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

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

[cc lang=”css”]

[/cc]

とか

[cc lang=”css”]

[/cc]

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

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

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

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

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

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

[cc lang=”html”]

[/cc]

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

[cc lang=”css”]#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;
}[/cc]

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

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

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

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

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