ul li元素在IE中比firefox有更多的空间

Question

我在IE7和Firefox中遇到互操作性问题。 在IE中，li元素的高度要比Firefox高。

以下是附图，以便更清晰。

http://img225.imageshack.us/i/interop.jpg/

html和CSS的代码：

<ul class="sa-progress">
<li class="sa-progress-current"><span id="intro_idx" >Select VPN Type</span></li>
<li class="sa-progress-default"><span id="local_idx" >Local</span></li>
<li class="sa-progress-default"><span id="remote_idx" >Remote</span></li>
<li class="sa-progress-default"><span id="vpn_idx" >VPN</span></li>
<li class="sa-progress-default"><span id="remote_dyn_idx" >Remote Users</span></li>
<li class="sa-progress-default"><span id="traffic_idx" >Traffic Profile</span></li>
<li class="sa-progress-default"><span id="review_idx" >Review &amp; Commit</span></li>
</ul>

ul.sa-progress {
    color: #333333;
    line-height: normal;
    padding: 7px 0 10px 10px;
}
ul.sa-progress {
    font-size: 12px;
}

请让我知道这里缺少什么。 任何帮助将不胜感激。

谢谢

Answer 1

ul / li是最常见的跨浏览器差异之一，因为它们对默认规则的解释不同，因此会逐渐出现。

您应该考虑使用CSS重置表来开始，例如：

• http://developer.yahoo.com/yui/3/cssreset/

这将对您的格式应用一致的基本规则，以便所有浏览器都有相当的机会进行匹配。

因为您不是从这个重置样式表开始的，而是在其之上进行设计，所以您可能会发现，应用该样式表会使其他几个元素对新的默认值做出反应时会有所不同。 我会说最好将它们修复，以使它们在重置表上看起来正确，然后您将有一个一致的基准可以使用。

在那之后你仍然可能有问题但是从你发布的css我认为还有一些更多的部分，比如你在一些菜单项中的双行间距。

如果你打算将它们变成菜单项，那么我采用这种样式的常用方法是使标签display: block; 然后从那里开始我的间距。 尽量保持你的ul li样式尽可能轻，并与你拥有的其他项目一起使用（例如菜单的容器div和链接的锚标签）。