IE7和Firefox / Opera / Chrome之间的差异 [英] Spacing differences between IE7 and Firefox/Opera/Chrome

问题描述

我有一个持续的问题，在IE7与Firefox / Chrome / Opera无序列表的垂直空间量，我似乎找不到解决方案。

I have an ongoing issue with the amount of vertical space of unordered lists in IE7 vs. Firefox/Chrome/Opera and I can't seem to find a solution out there.

在IE7中，空格少了，我想看看。

In IE7, the space is less and what I would like to see.

在Firefox，Chrome和Opera中， 。

In Firefox, Chrome, and Opera, the space between is about twice as much.

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

I can't account for any of the spacing issues in my code or page. On my page, the code looks like this:

<!--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如下所示：

My CSS for this section looks like this:

#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外观尝试解决这个问题。感谢。

Any idea what I can do to try to have the vertical spacing the same across all browsers? I would prefer to have the IE7 look to try to fix this. Thanks.

推荐答案

现在的问题是每个用户代理（浏览器）都有自己的

The problem you are having right now is due to the fact that each user-agent (Browser) has their own default styles, which may differ from one and the other.

重置样式表，以便中和这些样式，并在用户代理之间实现更恒定的呈现。

Reset stylesheets exists in order to neutralize those styles and achieve a more constant rendering between user-agents. This will basically remove the issue with all elements.

在这种情况下，使用 margin ， padding 和 line-height 的 #sidebox_bod ul li ：

In that particular case, playing with margin, padding and line-height of #sidebox_bod ul li will fix your problem:

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

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

I would recommend using a Reset CSS though, as that will solve most of those problems for all elements.

这篇关于IE7和Firefox / Opera / Chrome之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！