位置时的IE7滚动条：相对项目超出屏幕答案

【问题标题】：IE7 scrollbars when position:relative item WAS out-of-screen位置时的IE7滚动条：相对项目超出屏幕
【发布时间】：2011-07-02 11:47:51
【问题描述】：

当一个具有 position: relative 的项目用于导致滚动条时，IE7 似乎会显示滚动条（例如，如果您关闭了 position: relative 则会显示滚动条）。

<div class="box">
    <div class="inner box"></div>
</div>

.box {
    position : absolute;
    top      : 5px;
    left     : 100px;
    right    : 5px;
    height   : 100px;
    border   : 1px solid #000;
}

.inner {
    right    : auto;
    position : relative;
    width    : 110%;
    left     : -90px;
}

演示：http://jsfiddle.net/VE9ne/1/

想知道是否有人见过这个并知道如何解决它？

【问题讨论】：

似乎是适当的行为。您可以尝试负边距。使用 left:0;margin-left:-90px;
margin-left 作品：jsfiddle.net/VE9ne/4
@Gerben - 将其发布为答案，我会接受。然而，我不认为这是适当的行为，因为父 div 是绝对定位的，所以元素留下的空间不应该计入任何东西（包括 IE8 在内的所有其他浏览器都可以正常工作）

标签： css internet-explorer-7

【解决方案1】：

使用负边距而不是负向左

...
left:0;
margin-left:-90px;

【讨论】：

【解决方案2】：

添加

html, body
{
overflow: hidden;
}

【讨论】：

【解决方案3】：

这就是相对定位的作用，如果你偏移它，它会在对象的原始位置留下一个空白空间。我猜 IE7 不像其他浏览器那么聪明，所以它会显示滚动条，而其他浏览器似乎意识到除了空白空间之外什么都没有。

以下是 w3.org 对此的评价：

[...] 在此偏移一个框 (B1) 方式对框（B2）没有影响如下：给 B2 一个位置，好像 B1 没有偏移，B2 没有在 B1 的偏移量之后重新定位应用。 [...]

来源：http://www.w3.org/TR/CSS21/visuren.html#relative-positioning

使用 margins 和 floats 而不是相对定位可以解决您的问题

【讨论】：

+1 供参考，但在这种情况下没有“跟随框”，并且由于它是绝对定位的，因此也不会导致问题。因此，“空白”是由“影子”造成的
在 Firefox 4 中，我确实通过使用负顶部值 (link) 获得了滚动条，但在 IE9 中没有。我认为边距和浮动是比相对定位更好的做法！
我同意边距，但我尽量不使用浮点数。与它们相关的浏览器错误太多。