3

我在 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 看起来尝试解决这个问题。谢谢。

4

2 回答 2

7

您现在遇到的问题是由于每个用户代理（浏览器）都有自己的默认样式，这些样式可能彼此不同。

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

在这种特殊情况下，使用margin和paddingofline-height将#sidebox_bod ul li解决您的问题：

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

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

于 2010-04-01T16:13:37.380 回答
0

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

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

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

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

到您的站点的链接会很棒，因为如果不查看整个 CSS 文件和 html 上下文就很难进行调试。

于 2010-04-01T16:51:32.303 回答