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

【问题标题】：Disc to left of list item is displayed at bottom列表项左侧的光盘显示在底部
【发布时间】：2011-03-21 19:26:52
【问题描述】：

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

它只是一个未排序列表中的一个列表项，这发生在 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;
}

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

【问题讨论】：

我看不出有什么问题！或者我只是不明白你想做什么。
问题是列表项上的项目符号出现在行的垂直底部而不是顶部。
我遇到了类似的问题，但这个问题的答案对我没有帮助。详情见我的问题：stackoverflow.com/questions/6735404/…

标签： html css

【解决方案1】：

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

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

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

【讨论】：

+1 对 hasLayout 的良好调用，如果您不知道是什么原因导致的，这是一个棘手的问题

【解决方案2】：

我的声誉仍然太低，无法发表评论，否则我会将其添加到 peterjmag 的答案中。（也许他可以把它包括在内……）

width 属性是罪魁祸首，但我建议进行不同的更改。要确保您的列表元素在 IE7 中占据全角，请改用“width:auto”。这将使您具有相同的外观，并且您的要点将占据适当的位置。我发现“vertical-align:top/text-top”将项目符号点推到我想要的位置稍北一点。

如果您没有条件类或 IE 样式表，只需使用“*width:auto”来定位 IE7。

【讨论】：