在 IE 中，ul li 元素之间的空间比 firefox 大答案

【问题标题】：ul li elements have more space in between in IE than firefox在 IE 中，ul li 元素之间的空间比 firefox 大
【发布时间】：2011-12-01 15:55:44
【问题描述】：

我在 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;
}

请告诉我这里缺少什么。任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： html css internet-explorer firefox cross-browser

【解决方案1】：

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

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

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

这将为您的格式应用一致的基本规则，以便所有浏览器都有公平的匹配机会。

因为您没有从这个重置样式表开始，然后在它之上构建您的设计，您可能会发现应用它会使其他几个元素在对新默认值做出反应时变得有点不同。我会说最好修复这些问题，以便它们在重置表中看起来正确，然后您将拥有一致的基线。

之后您可能仍然会遇到问题，但从您发布的 css 来看，我认为它还有更多部分，例如您在某些菜单项中的双行距。

如果您要将它们制作成菜单项，那么我处理这种样式的常用方法是制作 a 标签display: block;，然后从中消除我的间距。尽量让你的 ul li 样式保持轻量级，并使用你拥有的其他项目（例如菜单的容器 div 和链接的锚标记）。

【讨论】：