0

次のレイアウトを互換モードで実行すると、コンテンツは固定ヘッダーの後ろに表示されなくなります。これを防ぐ方法はありますか？

ここでjsfiddleを参照し、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;
}

固定ヘッダー付きの固定流体レイアウト（左側のレールは固定）。下にスクロールすると、ページのコンテンツがヘッダーの下に表示されなくなります。

4

1 に答える 1

1

IE 互換モードの簡単な修正:

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

*IE7 用のCSS ハック (を使用) を使用しました。フィドル: http://jsfiddle.net/keaukraine/phPAN/

于 2012-09-05T13:23:43.133 に答える