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的{{1}}，padding和line-height来解决您的问题：

#sidebox_bod ul li

我建议使用重置CSS，因为这将解决所有元素的大部分问题。

Answer 2

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

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

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

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

，重置样式表可能会变得非常不必要/多余

指向您网站的链接非常棒，因为如果没有看到整个CSS文件和HTML背景，就很难调试。

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

2 个答案: