Question

我正在使用this sticky footer layout和CSS3 Pie，并且在IE兼容模式下，它会导致页脚分割，其中我的页脚内容显示在屏幕下方和CSS3饼图样式/背景/等在粘性页脚所在的正确位置。

如何让他们在一起玩得很好？

在IE中打开此jsfiddle，然后点击顶部的兼容性按钮（IE9中重新加载按钮的左侧）。如果按钮不可见，只需转到菜单中的以下内容：“工具 - ＆gt;兼容性视图”。 http://jsfiddle.net/johntrepreneur/srwtC/2/

更新请使用此小提琴示例，因为上面的示例不能准确表示问题：

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

Answer 1

更改页脚的位置似乎对我有用：

#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');
}

CSS3 PIE在IE7中将粘性页脚推离屏幕

1 个答案: