IE7 和 Firefox/Opera/Chrome 的间距差异

Question

我在 IE7 与 Firefox/Chrome/Opera 中的无序列表的垂直空间量方面一直存在问题，我似乎无法找到解决方案。

在IE7中，空间比较小，我想看的。

在 Firefox、Chrome 和 Opera 中，它们之间的间距大约是原来的两倍。

我无法解决我的代码或页面中的任何间距问题。在我的页面上，代码如下所示：

<!--BEGIN SIDEBOX-->
<div id="sidebox_new">
<div id="sidebox_top"><div id="sup">SUPPORT LINKS</div></div>
<div id="sidebox_bod">
<br />
<ul>
<li><a href="training.aspx">User Training</a></li><br /><br />
<li><a href="faqs.aspx">FAQ</a></li><br /><br />
<li><a href="logonasst.aspx">Logon Assist. Center</a></li><br /><br />
<li><a href="faxus.aspx">Fax Us</a></li><br /><br />
<li><a href="callus.aspx">Call Us</a></li><br /><br />
<li><a href="feedback.aspx">General Feedback</a></li>
</ul>
</div>
<div id="sidebox_btm"></div>
</div>
<!--END SIDEBOX-->

这部分的 CSS 如下所示：

#sidebox_bod
{
width: 200px;
margin: 0 30px 0 0;
padding: 0;
background: url('../img/supbxbod.gif');
background-repeat:repeat-y;
background-position:bottom;
}

#sidebox_bod ul
{
list-style-image:url('../triangle.gif'); 
text-align:left;
padding: 0 0 0 30px;
margin: 0;
}

#sidebox_bod ul li a
{
font-size: 13px;
}

知道我可以做些什么来尝试使所有浏览器的垂直间距相同吗？我宁愿让 IE7 看起来尝试解决这个问题。谢谢。

Answer 1

您现在遇到的问题是由于每个用户代理（浏览器）都有自己的默认样式，这些样式可能彼此不同。

Reset stylesheets 的存在是为了中和这些样式并在用户代理之间实现更稳定的渲染。这将基本上消除所有元素的问题。

在这种特殊情况下，使用margin、padding 和line-height 或#sidebox_bod ul li 将解决您的问题：

#sidebox_bod ul { margin: 0; padding: 0 16px; line-height: 1em; }

不过，我建议使用 Reset CSS，因为这样可以解决所有元素的大部分问题。

Answer 2

在列表项之间使用中断标记不是一个好主意。您应该为列表项间距设置特定的边距、填充和/或行高样式 - 否则将无法预测。

如果您想要精确对称，我建议您不要使用“ems”进行测量，因为它们在不同的浏览器和操作系统中的呈现方式非常不同。

IE 中也存在一些空白问题，但通常这会导致 更多 空间，而不是更少...

关于上述海报关于重置样式表的评论 - 我认为在这种情况下为您自己的网站设置特定样式会更好。如果您要对网站进行样式设置，重置样式表可能在很大程度上变得不必要/多余（参考：http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/）

链接到您的网站会很棒，因为如果不查看整个 CSS 文件和 html 上下文就很难进行调试。