Question

前言：如果这个问题应该发布在姊妹网站上，请注意。现在有这么多，很难说出SO的管辖范围内还有什么。

问题：我遇到连续<div>元素的问题。有时它们之间会有 magic 填充/边距，我无法弄清楚原因。

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

正如你所看到的，我的容器的标题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在某些情况下往往不会尊重它们，但计划是尽可能地做到这一点）。

为您提出的问题：

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

同时

如果您需要澄清或更多信息，请随时留在评论中，我会在看到它们时回答。（星期五晚些时候发布这个：o）。

Answer 1

找到答案，所以我会在这里发布给任何在这里寻找IE7帮助的人。

问题是顶级div的font-size。当我设置line-height: 1px;时，渲染引擎仍然为 12px 字体分配了 14px ，这个不可见的分配/填充/边距/无论是甚至通过div渗出overflow: hidden或严格的大小限制。

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

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

...将解决问题。

似乎IE7不能很好地服从行高。

IE7显示Bug，Magic Padding / Margin不应该存在

1 个答案: