IE7 显示错误，不应存在的 Magic Padding/Margin

Question

前言：对不起，如果这个问题应该发布在姐妹网站上。现在有这么多，很难说什么仍然属于 SO 的管辖范围。

问题：我遇到了与连续 <div> 元素有关的问题。有时它们之间有一个 magic 填充/边距，我不知道为什么。

IE7 Magic Padding Bug http://img689.imageshack.us/img689/6239/ie7bug.png

如您所见，我的容器的 header div 和 body div 之间有一个空格。让我解释一下我的 DOM/CSS 是如何设置的：

HTML

<div class="Product-IconView">
  <div class="PIV_TopCap"></div>
  <div class="PIV_Body">
      ...
  </div>
</div>

一个简单的容器/子 div 设置，没什么花哨的。

CSS

顶盖：

.PIV_TopCap
{
    margin: 0px;
    padding: 0px;
    height: 10px;

    line-height: 1px; /* For IE so the text doesn't make the div higher */
    overflow: hidden;

    background-repeat: no-repeat;
    background-image: url(/Images/Controls/IconView/PIV-Regular-Top.png);
}

正文：

.PIV_Body
{
    height: 266px;

    padding-left: 10px;
    padding-right: 10px;

    background-repeat: repeat-y;
    background-image: url(/Images/Controls/IconView/PIV-Regular-Body.png);
}

如您所见，CSS 也很简单，没有什么特别花哨的东西。主体内部是另一个系列的<div> 项目，遵循与此 div 相同的原则（容器 div，堆叠子项）。不会出现像这样奇怪的填充。

我使用 IE9 中的开发人员工具（启用了 IE7 标准）检查 DOM 并查看可能导致此问题的原因（例如从顶部向上推的边距等）

如您所见：

Body Highlighted http://img844.imageshack.us/img844/3448/ie7bug01.png Top Highlighted http://img192.imageshack.us/img192/46/ie7bug02.png

div 的边界是完整且正确的。

结论 这是一个非常奇怪的错误，我在我早期的设计中看到它，也无法解决。到目前为止，这确实是我在这个项目中遇到的唯一 IE7 迁移问题。据我所知，我非常接近 HTML 标准（我知道 IE 在某些情况下倾向于不尊重它们，但计划是尽我所能做到这一点）。

您的问题：

• 我应该寻找什么可能导致这种情况？
• 我做错了吗？如果是这样，我该如何解决？
• 有没有更简单/更好的方法来解决这个问题？
• 我有什么明显的遗漏吗？

还有

如果您需要澄清或更多信息，请随时将它们留在 cmets 中，我会在看到它们时回复它们。 （在星期五发布这个有点晚：o）。

Answer 1

找到了答案，因此我将其发布在此处，供任何登陆此处寻求 IE7 帮助的人使用。

问题出在顶部 div 的 font-size 上。虽然我设置了line-height: 1px;，但渲染引擎仍然为 12px 字体分配了 14px，即使使用@，这种不可见的分配/填充/边距/任何东西都会通过 div 流出987654323@ 或严格的尺寸限制。

只需确保这两行都在我的顶部 div 中（小于一行文本）：

font-size: 1px; line-height: 1px;

...将解决问题。

IE7 似乎不太符合 line-height。