[CSS]<ul>タグのスタイル指定によるレイアウトの崩れ

いろいろと試してみたのですが、どうしてもわからないので、教えてください。
以下のようなスタイル、HTMLでレイアウトしています。
-----------------------------------------
.boxOut {
background-color: #009900;
}
.boxIn {
margin: 0px;
padding: 0px;
}
.boxOut2 {
background-color: #cccccc;
margin: 10px;
}


<div class="boxOut">
<div class="boxIn">
<ul>
<li><a href="#">リスト１</a></li>
<li><a href="#">リスト２</a></li>
</ul>
</div>
</div>

<div class="boxOut2">
テキスト
</div>
-----------------------------------------

このままですと、意図したとおり、
上のboxOutと下のboxOut2は10ピクセル離れているのですが、
これに新たにスタイル

.boxIn ul {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}

を追加してブラウザで確認すると、何故かboxOut2がboxOutの中に入ってしまいます。

ブラウザはWinXP+IE6.0でこのような現象が発生するのですが、FireFoxなどでは起きません。

どのようにしたら、こういった現象を避ける事ができるのでしょうか。
とても困っています。
同様の経験をお持ちの方がいらっしゃいましたら、
回避法など教えてください。

よろしくお願い申し上げます。

No.2 ベストアンサー 回答者： noname#19175 回答日時： 2006/04/15 09:20

IEはmarginを指定した場合、marginを含めないサイズが、ボックスのwidthになります。

（Geckoではボックスのmarginを含めてwidthになる）
想像するにmarginの分だけ改行されているみたいなので、

.boxIn ul {
width:100%;
}

を追加すれば対応できます。

No.3 回答者： noname#19175 回答日時： 2006/04/15 21:40

すみません、#2の説明は間違っていました。

W3Cが定義するCSSではコンテンツ部分＝widthで、
Geckoでもそれに準じて(*1)いますが、
IEでは非標準準拠モードでは、コンテンツ部分＋padding＋border＝width
標準準拠モードでは、コンテンツ部分＝width
となります。

*1
#2の説明とは逆
ただし、Full StandardまたはAlmost StandardおよびQuickersの各モード間で違いが出ることがありますので、ご注意ください。

参考URL：http://www.microsoft.com/japan/msdn/ie/ie60/csse …

No.1 回答者： noname#19206 回答日時： 2006/04/14 23:54

仕様です。

参考URLを御覧ください。

参考URL：http://www.mozilla.gr.jp/standards/webtips/webti …