January 14, 2013

IE でlistを使ったら1.1.1.になった

ちょっとした備忘録。

サイト制作上で、olとliのリスト表示を含むhtmlファイルを素材としてもらった。
それをFirefoxやChromeで確認したらOkだったけれど、
IEで確認したら、「1.」ばかりのリストになってしまった為修正を入れた、というお話。
どうも、liにいれてる「zoom」が悪さをしているらしい。

こちらを参考に修正しました。

IE、Chrome、Firefoxで改めて確認してみることに。


こんな感じでテストページを作成して確認。


<style type="text/css">
ol {
margin-left:10px;
list-style-type:decimal;
}
li{
zoom:1;
}
</style>


りんご生産量ランキング
<ol style="list-style-position: outside">
<li>青森</li>
<li>長野</li>
<li>岩手</li>
<li>山形</li>
</ol>



左から IE 7.0、Chrome 12.0、FireFox 3.6



そうね、順番なんてつけずみんな一緒!
…というわけにはいかない。
ランキングの意味がなくなっちゃうしね。

で、先ほどのソース内CSSに、以下を追加
li{
zoom:1;
display:list-item; ←コレ追加
}
結果。



これでOK(なのか?)。

zoomをつけた場合に上記起こるらしいのだが、
きちんと各種ブラウザで確認しなきゃね、というお話。



xseraarcy at 22:00│Comments(0)TrackBack(0) 技術的&べんり帳 

トラックバックURL

コメントする

名前
 
  絵文字