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

您現在遇到的問題是由於每個用戶代理（瀏覽器）都有自己的默認樣式，這種樣式可能彼此不同。

存在重置樣式表是為了中和那些樣式並在用戶代理之間實現更恆定的呈現。 這基本上將消除所有元素的問題。

在這種情況下，使用#sidebox_bod ul li margin ， padding和line-height可以解決您的問題：

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

但我還是建議您使用Reset CSS，因為這樣可以解決所有元素中的大多數問題。

Answer 2

在列表項之間使用分隔符不是一個好主意。 您應為列表項的間距設置特定的邊距，填充和/或行高樣式-否則將無法預測。

如果您想要精確的對稱性，建議不要使用“ ems”進行測量，因為它們在不同的瀏覽器和操作系統中呈現的方式非常不同。

IE中也存在一些空白問題，但通常會導致更多的空間，而不是更少的...

關於上述張貼者關於重置樣式表的評論-我認為在這種情況下最好為您自己的網站設置特定樣式。 如果您要對網站進行樣式設置，則重置樣式表可能在很大程度上變得不必要/多余（請參閱： http : //meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ ）

鏈接到您的站點將非常有用，因為在不查看整個CSS文件和html上下文的情況下很難調試。