html - 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存在是为了中和这些样式并在用户代理之间实现更稳定的渲染。这将基本上消除所有元素的问题。

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

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

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