IE7显示错误，不应该存在的魔术填充/边距

Question

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

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

IE7魔术填充错误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并查看可能导致此问题的原因（例如边距向上推的东西）

如您所见：

正文突出显示http://img844.imageshack.us/img844/3448/ie7bug01.png 顶部突出显示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什么，即使存在overflow: hidden或严格的尺寸限制。

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

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

...将解决此问题。

IE7似乎不太符合行高。