列表项左侧的光盘显示在底部

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

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

请注意，该页面上的代码使用hacks来定位IE6和IE7。我推荐使用条件注释，如下所示：

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

Answer 2

我的声誉仍然太低而无法评论，否则我会将此添加到peterjmag的答案中。 （也许他可以包括它......）

宽度属性是罪魁祸首，但我建议做出不同的改变。要确保列表元素在IE7中占据全宽，请使用＆＃34; width：auto＆＃34;代替。这将给你相同的外观，你的要点将采取适当的位置。我发现＆＃34; vertical-align：top / text-top＆＃34;将子弹点推到我想要的地方的北面。

如果您没有条件类或IE样式表，只需使用＆＃34; * width：auto＆＃34;以IE7为目标。