Question

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/

想知道是否有人看过这个并知道如何修复它？

Answer 1

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

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

[...]在此偏移一个方框（B1）方式对盒子（B2）没有影响如下：B2被赋予一个位置 B1没有偏移，B2没有 B1偏移后重新定位应用。 [...]

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

使用边距和浮点数代替相对定位可以解决您的问题

Answer 2

添加

html, body
{
overflow: hidden;
}

Answer 3

使用负边距而不是负左边

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

当位置：相对项目超出屏幕时，IE7滚动条

3 个答案: