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

Question

前言:很抱歉，如果这个问题应该发布在姐妹网站上。现在有很多，很难说哪些仍然属于 SO 的管辖范围。

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

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

如您所见，我容器的标题 div 和主体 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 在某些情况下往往不遵守它们，但计划是尽可能正确地做到这一点)。

给你的问题:

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

还有

如果您需要澄清或更多信息，请随时将其留在评论中，我会在看到时回复。 (在星期五晚些时候发布:o)。

Answer 1

找到答案，所以我会把它张贴在这里，以供来到这里寻求 IE7 帮助的任何人使用。

问题是顶部 div 的 font-size。虽然我设置了 line-height: 1px;，渲染引擎仍然为 12px 字体分配了 14px，这个不可见的分配/填充/边距/即使有 overflow: hidden 或严格的大小限制，也会通过 div 流出。

只需确保这两行都在我的顶部 div 中(小于一行文本):

字体大小:1px; 行高:1px;

...将解决问题。

看来 IE7 并没有很好地遵守行高。