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

Webサイト作成トラブル
 css

リスト

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

前回リストのCSS　ブラウザ間の違いにて、ブラウザ間の違いの大きな点は、リストのマーカーを設定するために、paddingを指定しているのか、marginを指定しているかが大きな違いだということを書きました。

では、前回の続きでIEでも同じような見た目を実現すべく、marginを0にしてみます。
```
 <style type="text/css">
 
 </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>
```
IE6 のスクリーンショットです。

Firefoxのスクリーンショットです。こちらは横が変わりありませんが、上下のマージンがなくなったため、多少見た目に変動があります。

IE6のスクリーンショットを見て、一番上のマーカーの黒丸がなくなったのに気付いたでしょうか？
marginを0にすると、マーカーまでなくなってしまうのです！

こうなった状態で、たとえば”list-style-position”というスタイルをinsideにすることで、マーカーの表示はできます。
このlist-style-positionプロパティは本来、マーカーをリストの内側に表示するのか、外側に表示するのかを指定するプロパティです。
```
 <style type="text/css">
 
 </style>
  --以下は前述と同じなので省略--
```
すると、IE6のスクリーンショットではこうなります。

マーカーは表示されたけれども、ネストされている（リストが入れ子になっている）部分を見てみてください。
内容が長いと折り返されてますが、リストのマーカーが内側に入ってしまっています。
縦にリストを表示したいという目的がある場合、これはあまり望まない表示ではないでしょうか？

結局は、padding-left とmargin-leftを適切に設定するのが早いと思います。
```
 <style type="text/css">
 
 </style>
```
IE6のスクリーンショット

Firefoxのスクリーンショット

さて、今この時点で、横幅は何ピクセルでしょうか？
答えは、87ピクセルになっています。

それは、一番上のリストはpadding とmarginが10ピクセルにしましたが、ネストされた子供のリスト（例では・ナルト連弾　と書いてある箇所）は、まだmargin、paddingが40ピクセルになっているからです。
どこから計算したmargin、paddingかというと、親のリストの始点からです。

親のリストのマージンやパディング＋40ピクセル+コンテンツ、のため、中身が膨らんでしまっているのです。

例：Firebugで見た子供の