投稿日: 投稿者:

リストのCSS　ブラウザ間の違い

Webサイト作成 トラブル
css

リスト

  • って便利なタグですが、ブラウザ間で動きがかなり違うので、制御しようとするととたんに厄介になります。
    ここでは、IE6と、Firefox3での挙動の違いを、まとめてみました。

    次のようなHTMLがあったとします。
    どのようになっているかわかりやすくするため、背景に色をつけてあります。

     <body> 
 リストだよー。
 <table><tr>
 <td style="width:70px; background-color:#FFCC33">
 <ul class="test1">
 <li>ナルト
     <ul>
       <li>ナルト連弾</li>
       <li>ナルトキック</li>
     </ul>
 </li>
 <li>さすけ</li>
 <li>さくら</li>
 </ul>
 </td>
 </tr></table>
 </body>

    この時点で、見え方は次の通りです。
    IE6、Firefox3で共通
    list_ss1.png

    テーブルのセルを、横幅　70px（ピクセル）に設定しているにも関わらず、コンテンツがあふれているため、70px以上になっています。
    実際何ピクセルになっているかというと、107ピクセルです。

    Firebugで見るレイアウトの図
    list_ss2.png
    list_ss3.png

    こちらは何も指定していないのに、パディングが左に40ピクセルたされています。
    Firefox（Gecko系）のデフォルトの挙動です。

    このデフォルトの挙動がIE系と違うのが、不幸の始まりなのです…。

    では、左に寄せるために、paddingを0にしてみます。

     <style type="text/css">
 <!--
 .test1 {
 	padding: 0px;
 }
 -->
 </style>
 </head>
 
 <body> 
 リストだよー。
 <table><tr>
 <td style="width:70px; background-color:#FFCC33">
 <ul class="test1">
 <li>ナルト
 　　<ul>
     <li>ナルト連弾</li>
     <li>ナルトキック</li>
     </ul>
 </li>
 <li>さすけ</li>
 <li>さくら</li>
 </ul>
 </td>
 </tr></table>
 </body>
 </html>

    すると、Firefoxでは次の通りです。

    list_ss4.png

    左端の色は、ブラウザの端っこです。
    なんと、リストタイプのディスクマーカー（黒い円）がちょうど半分のところでブラウザの端っこにめり込んでいるようになっています。

    IE6ではどうでしょうか。

    list_ss5.png

    びくとも動いていません。1番最初のスクリーンショットと同じですね。[sad]

    なぜかというと、IE系では、リストのマーカー（黒い点のことです）を表示するために、margin-leftが指定されているからです。
    Firebugで見たときは、padding-leftが40px入っていましたね。

    1. IE系ではリストのマーカーを示すために、margin-leftが使われる
    2. Gecko系ではリストのマーカーを示すために、padding-leftが使われる

    と覚えておきましょう。

    さらに、リスト

カテゴリーcss

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です