IE7滚动条位置：相对项目WAS超出屏幕

问题描述：

当位置：relative用于使用滚动条（例如，如果您将position: relative关闭），IE7似乎显示滚动条。IE7滚动条位置：相对项目WAS超出屏幕

<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; – Gerben

'margin-left'作品：http://jsfiddle.net/VE9ne/4/ – thirtydot

@Gerben - 发布一个答案，我会接受它。然而，我不认为它是合适的行为，因为父div是绝对定位的，所以元素留下的空间不应该计入任何东西（每个其他浏览器，包括IE8都适用于此） –

答

使用负利润率，而不是消极左

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

答

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

这里是w3.org不得不说一下吧：

[...]在这方式抵消一箱（B1）对箱（B2），其如下没有影响：B2被给予一个位置，好像 B1未被偏移并且B2不是在B1的偏移被应用后被重新定位为。 [...]

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

使用利润率和花车，而不是相对定位可以解决你的问题

+1参考，但在这种情况下，没有“下面的方框”，并且由于绝对定位，因此不存在问题。因此，“空白空间”是由“阴影”引起的 –

在Firefox 4中，我通过使用负值（[link]（http://jsfiddle.net/CK5Zz/1/））获得滚动条，但不是在IE9中。我认为利润和浮动比相对定位更好！ – philVigneault

我会同意利润率，但我尝试不使用浮动。有太多的浏览器错误与它们相关联。 –

答

添加

html, body 
{ 
overflow: hidden; 
}

IE7滚动条位置：相对项目WAS超出屏幕

相关推荐