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（带*）。小提琴：http://jsfiddle.net/keaukraine/phPAN/

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

1 个答案: