列表背景颜色在 IE7 中搞砸了

Question

我在 Firefox 中设置了一些无序 HTML 列表及其标题的样式：

替代文字 http://img24.imageshack.us/img24/711/screenshot001nij.png

不幸的是，在 IE7 中，它们看起来像这样：

替代文字 http://img11.imageshack.us/img11/8343/screenshot002e.png

相关的 HTML 是

<div class="list-column">
    <h4>Types de pêche</h4>
    <ul>
        <li>Pêche en lac</li>
        <li>Pêche en Rivière</li>
    </ul>
</div>

CSS 是：

.list-column {
  float: left;
  margin-right: 20px;
  width: 20em;
}

div.list-column h4 {
  background-color: #FDD041;
  padding: 5px !important;
}

ul li {
  background-image: url(images/arrow.gif);
  background-position: 0 11px;
  background-repeat: no-repeat;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-bottom: 6px;
  margin-left: -20px;
  margin-top: 2px;
  padding: 2px 0 2px 18px;
}

我怀疑包含列表的 div 向左浮动的事实可能是我问题的根源，但我不确定如何解决 IE7 中显示不佳的问题？

更新：我尝试向 'ul' 元素添加一个 'zoom: 1' 属性，以查看给元素 'layout' 是否可以解决 IE 中的问题，但它没有。

问题绝对与圆角无关。 我暂时关闭了它们，但它并没有改变 IE 中的任何东西（除了角落的外观）。

谢谢，唐

Answer 1

IE 和其他浏览器有不同的默认样式表。

IE 通过在 <ul> 上放置“margin-left”来缩进列表项。 其他浏览器在 <ul> 上放置了一个'padding-left'。

因此，如果您想在所有浏览器中看起来都一样，请在 <ul> 上显式设置 'margin-left' 和 'padding-left'。 在您的情况下，您需要添加类似“margin: 0; padding: 24px” 在你的“div.list-column ul, ul.round” 规则。

（IE 中的默认列表 'margin-left' 准确地说是 '30pt'。）

Answer 2

一个常见的解决方案是设置元素的宽度。 这将使 IE 的所有内容都在该宽度的范围内。

Answer 3

我认为这是 IE-7 自动缩进 li 最简单的调试方法是安装 IE-8； 切换到兼容的 ie-7 模式。 然后从工具菜单启动开发者工具

然后，您可以检查各个元素并检查是否应用了隐藏的填充或边距

Answer 4

我认为它可能取决于 ie 和 firefox 上的不同默认填充。 如果您还没有这样做，请尝试在您的代码中使用 reset.css。

Ps 在 ie8 中你有类似于 firebug 的开发者工具。 尝试使用它们，看看您是否无法理解问题...