html - Div 中 IE 7、8、9 中的垂直间距

Question

我有一个 div 标签，其中包含一些其他元素，如下所示:

<div>
  <h3>Text</h3>
  <hr/>
  <ul>
    <li>Text</li>
  </ul>
  <hr/>
  <span>Text</span>
</div>

在 div 中的每个不同元素之间，我为所有元素设置了 0 的填充和边距(这反射(reflect)在开发人员工具中)，但是在所有 Internet Explorer 浏览器中都有很大的空间(大约 4-6像素)在每个元素之间。我已经尝试将 html、body padding/margins 以及 DOM 层次结构中它上面的几乎所有其他元素设置为 0，但是间距仍然存在。我也尝试过最小化 HTML，因此没有换行符或空格，但它并没有解决问题。

任何建议可能是什么问题？

Answer 1

我想问题出在 IE 中的 hr 元素上……它没有像其他 HTML 元素那样被处理。有许多解决方案……但当您想减少利润时，我无法让其中任何一个发挥作用。

话虽这么说......通过反复试验，我设法为 IE 仅渲染工作获得了负利润。不能确定它是否适用于 IE<6、IE7、IE>8(无法测试)。

最小的 CSS 代码片段:

<style>
   hr {padding:0;margin:0;height:1px;border:none;color:#000;background-color:#000;}
</style>
<!--[if lte IE 8]>
<style>hr {display:block;margin:-7px 0;}</style>
<![endif]-->

...我已将它限制在 IE8 上，因为网络上的说法是 IE9 中的情况会发生变化...一旦它可以测试我们就会看到:)。请注意，如果您想更改线条的颜色，则需要更改 color 和 background-color 的值(取决于使用的浏览器) : ref )

测试并工作于:

1. IE 8.0.6001...
2. IE 6.0.2900...
3. FF 3.6.15
4. Cr 10.0.648.134

(在 WinXP 上)