2

前言：对不起，如果这个问题应该发布在姐妹网站上。现在有这么多，很难说什么仍然属于 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 也非常简单，没有什么特别花哨的。在 body 内部是另一个<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）。

4

1 回答 1

1

找到了答案，所以我将把它贴在这里给任何在这里寻求 IE7 帮助的人。

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

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

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

...将解决问题。

似乎 IE7 并没有很好地遵守 line-height。

于 2011-02-07T18:12:34.933 回答