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

【问题标题】：Vertical Spacing in IE 7,8,9 within a DivIE 7,8,9 中的垂直间距在 Div 中
【发布时间】：2011-07-20 15:53:14
【问题描述】：

我有一个 div 标签，里面还有其他一些元素，如下：

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

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

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

【问题讨论】：

你能做一个JS Bin 测试用例吗？
有趣的是我无法在 JS Bin 中复制问题，我会继续尝试。

标签： html css internet-explorer padding margin

【解决方案1】：

我猜问题出在 IE 中的 hr 元素...它不像其他 HTML 元素那样被对待。有很多解决方案......但是当你想减少利润时，我无法让它们中的任何一个工作。

话虽如此...通过反复试验，我设法获得了仅 IE 渲染工作的负边距。不能确定它是否可以在 IE8 中工作（无法测试）。

最小的 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）

经过测试和工作：

IE 8.0.6001...
IE 6.0.2900...
FF 3.6.15
铬 10.0.648.134

（在 WinXP 上）

【讨论】：

将 ul 着色为绿色不会为间隔的额外像素着色。此外，每个 hr 标签的上方和下方都存在空格。 list-style-type 是光盘。
@Dave Hunt - 我没有注意到那些有问题的 HR 元素 - 更新了我的解决方案答案
成功了，非常感谢！不知道为什么一开始会有额外的间距，开发人员工具甚至都没有接受它

【解决方案2】：

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

选项：

1) 将所有元素设置为 display:block 或 display: inline-block。 2) 一个接一个地写下所有的标签，忽略所有的 SPACE 或 ENTER 字符

【讨论】：

他说他最小化了 HTML 以删除空格字符（也包括换行符）......不要以为是这样。
是的，我在其他地方看到了推荐的修复方法，但没有运气