Div中IE 7,8,9的垂直间距

Question

我有一个包含其他几个元素的div标记，如下所示：

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

在div中的每个不同元素之间，我为所有元素设置了0填充和边距(这反映在开发人员工具中)，但是在所有Internet Explorer浏览器中，每个元素之间都有很大的空间(大约4-6像素)。我已经尝试将html、正文填充/页边距设置为0，以及在DOM层次结构中几乎所有高于它的其他元素，但是间距保持不变。我还尝试最小化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

(在WinXP上)

Answer 2

您看到的空格不是填充、边距或边框。您看到的是存在于每个标记之间的“”字符。

选项：

1)将所有元素设置为display:block或display: inline-block。2)一个接一个地写所有的标签，去掉所有的空格或输入字符