Question

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

alt text http://img24.imageshack.us/img24/711/screenshot001nij.png

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

alt text 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通过在＆lt; ul＆gt;上放置'margin-left'来缩进列表项。其他浏览器在＆lt; ul＆gt;上放置了“padding-left”。

因此，如果您想在所有浏览器中看起来相同，请在＆lt; ul＆gt;上明确设置'margin-left'和'padding-left'。在你的情况下，你会想要添加像“margin：0;填充：24px“在您的”div.list-column ul，ul.round“规则。

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

Answer 2

常见的解决方法是设置元素的宽度。这将使IE一切都在该宽度的范围内。

Answer 3

我认为这是IE-7自动限制的情况最简单的调试方法是安装IE-8;切换到兼容的ie-7模式。然后从工具菜单中启动开发人员工具

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

Answer 4

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

P.S。在ie8中，您有与firebug类似的开发人员工具。尝试使用它们，看看你是否能理解这个问题......

列表背景颜色搞砸了IE7

4 个答案: