html - 列表项左侧的圆盘显示在底部

Question

正在发生的事情的屏幕截图:

它只是一个未排序列表中的一个列表项，这种情况发生在 IE7 中，其他地方都没有。

<ul>
  <li>Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text.</li>
</ul>

.fancybox-entry.computer-policy li {
    float:none;
    width:100%;
    list-style-type:disc;
    margin-bottom:10px;
}

.fancybox-entry.computer-policy ul + p {
    margin-bottom:20px;
}

.fancybox-entry.computer-policy ul {
    margin:5px 0 10px 25px;
}

任何关于它为什么这样做的帮助和修复表示赞赏。

Answer 1

在 IE7 中，width CSS 属性似乎触发了 li 元素的 hasLayout。首先尝试删除 width:100%; 声明以确保元素符号出现在正确的位置。如果您不能没有 width 属性，您可以使用 position: relative; 和 vertical-align: top; 将元素符号移回原位，如http://www.gunlaug.no/tos/moa_26.html .

请注意，该页面上的代码使用 hack 来针对 IE6 和 IE7。我建议改用条件注释，如下所示:

<!--[if IE 7]>
  <style type="text/css" media="screen">
    /* IE7-specific CSS here */
  </style>
<![endif]-->