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

您现在遇到的问题是由于每个用户代理(浏览器)都有自己的默认样式,这些样式可能因不同而异.

存在重置样式表是为了中和这些样式并在用户代理之间实现更恒定的呈现.这基本上将删除所有元素的问题.

在这种特殊情况下,玩margin,padding和line-height的#sidebox_bod ul li将解决你的问题:

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

我建议使用重置CSS,因为这将解决所有元素的大多数问题.