0

このスティッキー フッター レイアウトをCSS3 Pieと共に使用しています。IE互換モードでは、フッターのコンテンツが画面の下に表示され、CSS3 Pie のスタイル/背景/その他が正しい場所に表示される場所でフッターが分割されます。スティッキーフッターが行きます。

一緒に楽しく遊べるようにするにはどうすればいいですか？

この jsfiddle を IE で開き、上部にある互換性ボタン (IE9 のリロード ボタンの左側) をクリックします。ボタンが表示されていない場合は、メニューの [ツール] --> [互換表示] に移動してください。 http://jsfiddle.net/johntrepreneur/srwtC/2/

更新: 上記のものは問題の正確な表現ではないため、代わりにこのフィドルの例を使用してください。

http://jsfiddle.net/johntrepreneur/8rZWu/embedded/result/

4

1 に答える 1

2

フッターの位置を変更することは私にとってはうまくいくようです：

#footer
{
    position: absolute; /* This is the important bit */
    margin-top: -81px; /* negative value of footer height */
    margin-left: 10%;
    margin-right: 10%;
    height: 80px;
    width: 75%;
    clear:both;
    text-align: center;
    font-size: 48pt;
    font-weight: bold;

    background: url(bg-image.png) no-repeat #EBEBEB; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#EEFF99) to(#66EE33)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#EEFF99, #66EE33); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#EEFF99, #66EE33); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#EEFF99, #66EE33); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#EEFF99, #66EE33); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); /*PIE*/

    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 0;
    border-top: 1px solid black;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px 10px 0px 0px;

    behavior: url('/js/lib/PIE-1.0.0/PIE.htc');

}

ここを参照してください：

http://fiddle.jshell.net/srwtC/3/show/

アップデート

#footer {
    max-width: 1200px;
    min-width: 700px;
    position: absolute;
    z-index: 2;
    height: 50px;
    left: 0; /*IMPORTANT*/
    right: 0; /*IMPORTANT*/
    margin: -51px auto 0;
    border: 1px solid black;
    border-bottom: 0;
    background: #E1DAC6;
    background: url(bg-image.png) no-repeat #EBEBEB;
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33);
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px 10px 0px 0px;
    behavior: url('/js/lib/PIE-1.0.0/PIE.htc');
}
于 2012-08-29T17:35:57.773 に答える