WinIEで、list要素(ul,ol,li)にwidthを指定すると色々おかしい
WinIE6で幅(width)指定したリスト要素(ul・ol)のマークが消えるバグと、回避策 - Web & Design Creation notes+++
上記記事が中途半端だったので、もう少し内容を加えて詳しく書こうと思います。
WinIE6,7,8で、list要素(ul,ol,li)にCSSのwidthプロパティを設定すると、レンダリングがおかしくなります。
WinIE6,7は互換モード・標準モードどちらも、WinIE8は互換モードでキャプチャのような表示になります。
HTML(ul)
<ul> <li>CSS<br>指定なし</li> <li>CSS<br>指定なし</li> </ul> <ul style="width:50%;"> <li>ulに<br>width:50%;</li> <li>ulに<br>width:50%;</li> </ul> <ul> <li style="width:50%;">liに<br>width:50%;</li> <li style="width:50%;">liに<br>width:50%;</li> </ul>
HTML(ol)
<ol> <li>CSS<br>指定なし</li> <li>CSS<br>指定なし</li> </ol> <ol style="width:50%;"> <li>olに<br>width:50%;</li> <li>olに<br>width:50%;</li> </ol> <ol> <li style="width:50%;">liに<br>width:50%;</li> <li style="width:50%;">liに<br>width:50%;</li> </ol>
ul,olにwidthを設定すると、リストマークが消える
前記の例の、2番目のリストの状態です。
回避策
- ul,olにlist-style-position:inside;を適用
- liにtext-indentとpaddingで字下げ
- ul,olにmargin-leftで横位置調整
<ul style="width:50%;list-style-position:inside;margin-left:1.5em;"> <li style="padding-left:1em;text-indent:-1em;">ulに<br>width:50%;</li> <li style="padding-left:1em;text-indent:-1em;">ulに<br>width:50%;</li> </ul>
liにwidthを設定すると、リストマークが下にずれる
前記の例の、一番下のリストの状態です。
回避策
- liにvertical-align:top;を適用
※ただし、ulの場合は、デフォルトのマークの位置より上になってしまう。こちらの回避策は不明。。。
<ul> <li style="width:50%;vertical-align:top;">liに<br>width:50%;</li> <li style="width:50%;vertical-align:top;">liに<br>width:50%;</li> </ul>
olのliにwidthを設定すると、リスト番号がすべて1.になってしまう
前記の例の、olのキャプチャの、一番下のリストの状態です。
回避策
- liにdisplay:list-item;を適用
<ol> <li style="width:50%;vertical-align:top;display:list-item;">liに<br>width:50%;</li> <li style="width:50%;vertical-align:top;display:list-item;">liに<br>width:50%;</li> </ol>