css - IE9水平滚动条高度问题

Question

我的网站顶部有一个如下所示的元素:

#top { position:fixed;top:0;left:0;margin:0;padding:0;height:60px;width:100%; }

我还有一个其他元素，底部如下所示:

#footer { margin:0;padding:0;position:fixed;height:60px;bottom:0;left:0;width:100%; }

在这两个元素之间，我终于在中间有了一个 #main 元素，如下所示:

#main { margin:0;padding:0;position:absolute;top:60px;left:0;bottom:60px;width:3000px; }

Chrome/Firefox/Safari 一切正常，但 IE9 不行。看起来水平滚动条的高度(大约 15px)计入了 #main 元素的高度内。因此#main 元素底部的 15px 高度区域隐藏在#footer 元素后面。

你能帮我一下吗？

编辑:这是问题的示例...

http://statosphere.fr/stackoverflow/test.php

使用 Chrome 和 Firefox，您可以看到整个黄色方 block (30x30px)。但在 IE9 中，您看不到隐藏在红色页脚后面的黄色方 block 的底部。

Answer 1

滚动条似乎确实存在 IE9 特有的问题。

尝试将其包装在 <div> 中包含 width像这样:

HTML:

<div id="maincontainer">
    <div id="top"></div>
    <div id="main">
        <div id="element"></div>
        <div id="footer"></div>
    </div>
</div>

CSS:

#maincontainer{
  width:3000px;
}