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和#sidebox_bod ul liline-height打将解决你的问题：

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

我会建议使用一个Reset CSS，虽然，因为这将解决大部分的问题，为所有元素。

Answer 2

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

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

也有一些IE的白色空间问题，但通常会导致更多的空间，而不是更少...

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

到您的网站的链接将会很好，因为它很难在没有看到整个CSS文件和html上下文的情况下进行调试。