li要素の左側マージン調整がうまくいかなかった原因

解決した後に見つけたのですが、少し前にも俺と同じ理由で同じくらいの時間ハマってた人がいたようです。。。

崖っぷちWEBデザイナーブログ | CSS「ul li」IE Firefox ズレ解消メモ

ul,li要素のpaddingとmarginを共に0にしているにも関わらず、IEではli要素の左側にマージンが取られてしまう現象に2時間くらい悩まされました。

この問題はlist-style-position: insideが設定されている場合に発生します。
これはバグではなくIEとその他のブラウザでの実装の違いによるものと思われます。list-style-type: noneを指定してもIEではマーカーの分のマージンが確保されます。

以下に例を示します。

<ul style="border: solid 1px #000; margin-left: 0; padding-left: 0; list-style: none inside;">
    <li>test</li>
    <li>test</li>
</ul>

この場合のIE6,Firefox,Operaにおける表示結果は以下の通りです。

Safariはまだ試していませんが、これらのブラウザの表示をそろえるにはlist-style-position: outsideを指定してやれば解決します。

それと直接は関係無いですが、これと合わせてネガティブマージンに関して。
親の幅を超えるwidthを指定した子要素に対してmargin: -20px等のネガティブマージンを指定した時にIE6では親要素からはみ出た分が表示されないと言う問題が起きると言う現象が上記のマージン問題と同時に起きたのでだいぶ混乱しました。

例えば以下のようなコード

<div style="width: 170px; border: solid 1px #000; margin-left: 0; padding-left: 0;">
    <p style="width:200px; margin-left: -30px; background-color: #FF0000;">testtesttest</p>
</div>