Css 谷歌浏览器和IE7无序列表问题

我正在设计一份在线简历，但在谷歌chrome和ie7上出现了问题，而且列表混乱。当它们在侧边栏中渲染精细时，由于某些原因，在内容部分，第一个项目符号浮动到其容器的最右侧，文本显示精细，而所有其他项目符号和文本自身定位精细。这个错误不会发生在任何其他主流浏览器中

这是代码和正在发生的事情的屏幕截图

<h2>Education</h2>
<div class="education">
    <h3>Institution Name</h3>
    <p class="date">Date 1000<br />~ Date 2000</p>
    <p class="description">Vel augue ac a adipiscing? Facilisis. Dictumst vut rhoncus ut scelerisque, duis mid! Amet ultricies parturient cursus amet? Cum, diam sed platea ultrices in, phasellus augue amet.</p>
    <ul>
        <li><span>Masters of Design</span></li>
        <li><span>fagjfjfhdgsdf</span></li>
        <li><span>Random blabble text</span></li>
    </ul>
    </div>

.education ul{margin-left:120px;}
#sidebar{}
.education ul li,
#sidebar ul li{list-style:square; font-size:18px; line-height:18px;}
.education ul li span,
#sidebar ul li span{font-size:13px; color:#3C3225;}
ul{color:#11c9c7;}

教育
机构名称
日期1000
日期2000
奥古斯都水平如何？设施。这句话的意思是：“我的天哪，我的天哪！”！阿梅特Ultrices产难易阿梅特？嗯，我是奥古斯·阿梅特

设计大师
FAGJFHDGSDF
随机blabble文本

.教育{左边距：120px；}
#边栏{}
李国宝先生，
#侧边栏ul li{列表样式：正方形；字体大小：18px；行高：18px；}
.教育部，
#侧边栏ul li span{字体大小：13px；颜色：#3C3225；}
ul{颜色：#11c9c7；}

---

奇怪的是，它在IE6和IE8中工作，所以我很困惑，因为我的代码与平时没有什么不同，边栏ul使用的代码与图中所示的相同。有人知道这可能是什么原因吗？

将其添加到样式表中：

ul { clear: left; }

---

似乎您的（我假设是

p

标记）段落有一个

float:left

和一个明确的指定宽度。但是，

ul

仍试图将段落保持在左侧，并产生奇怪的结果。

将此添加到样式表中：

ul { clear: left; }

似乎您的（我假设是

p

标记）段落有一个

float:left

和一个明确的指定宽度。然而，

ul

仍在试图将段落保持在左侧，并产生奇怪的结果