CSSテクニックコミュの【質問】MacのIEで正しく表示されません。

ここでは大変お世話になっております。
試行錯誤しつつ、見よう見まね含めCSSと格闘する日々です。
｢box｣で区切った部分が、MacのIEでうまく表示されないので質問させてください。

図は、ソースと一致していませんが（色など）、だいたいこんな感じです。
MacのIEでは、正しくbox内に内容が入ってくれません。

HTML内の<p class="clear"></p>をとってしまうと、他のブラウザでも表示がされなくなるため
苦しまぎれです。

実はhttp://www.mdn.co.jp/webcre/CSSD/Vol32/のサンプルの｢学科のポイント｣というコンテンツ部分を引用したのですが、うまくいきませんでした。
画像や<p></p>の内容以外は、はみでてしまうといった感じです。

もしかしたら、この部分以外でごちゃごちゃとした原因があるのかもしれませんが、何か解決方法がありましたらどうぞよろしくお願いいたします！

以下がソースです。
***HTML***
<div class="box">
<ul>
<li>あああああ</li>
<li>いいいいい</li>
</ul>
<ul>
<li>ううううう</li>
<li>えええええ</li>
</ul>
<p class="clear"></p>
</div>

***CSS***
.box {
background-color: #FFFFCC;
border: 1px solid #000000;
margin-top: 10px;
font-size: 12px !important;
color: #663300;
width: 505px;
voice-family: "\"}\"";
voice-family:inherit;
width:510px;
}
html>body .pointbox {
width: 510px;
}
.box ul {
padding-left: 20px;
margin-left: 0px;
width: 200px;
float: left;
padding-right: 10px;
margin-top: 10px;
list-style-type: none;
margin-bottom: 0px;
}
.box li {
margin-bottom: 5px;
}