Question

我正在设计在线简历，但我在谷歌浏览器中遇到问题，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;}

Bug Images in IE7, and Google Chrome

奇怪的是它适用于IE6和IE8，所以我很困惑，因为我编码的方式与我平时没有什么不同，并且使用相同代码的侧边栏ul渲染得很好。有谁知道这可能导致什么？

Answer 1

将其添加到样式表中：

ul { clear: left; }

看来你的（我假设的是p标签）段落有float: left并且指定了明确的宽度。但是，ul仍然试图将段落保留在左侧，并产生奇怪的结果。

谷歌Chrome和IE7无序列表问题

1 个答案: