html - 为什么我的内容在兼容模式下会消失在标题后面？

Question

在兼容模式下运行以下布局时，内容会消失在固定标题后面。有什么办法可以防止这种情况发生吗？

参见 jsfiddle here并在 IE 中切换兼容模式。当不在兼容模式下时，布局在 chrome 和 IE9 中工作正常。

标题CSS基本上是:

#headerContainer
{
    position: fixed;    
    top:0px;   
    z-index:999;
    background:green;
    width: 100%;
}

内容 css 是:

#container{
overflow:hidden;
padding-left:480px; /* The width of the rail */
margin-top: 135px;
background: red;
}

它是固定流式布局(左栏是固定的)，带有固定的页眉。向下滚动时，我希望页面的内容消失在标题下方。

Answer 1

IE 兼容模式的快速修复:

#container{
    overflow:hidden;
    padding-left:480px; /* The width of the rail */
    margin-top: 135px;
    background: red;
    *position:relative;
    *top:135px;
}

我已经为 IE7 使用了 CSS hack(使用 *)。 fiddle :http://jsfiddle.net/keaukraine/phPAN/