0

我将这种粘性页脚布局与CSS3 Pie一起使用，在 IE 兼容模式下，它会导致页脚拆分，我的页脚内容显示在屏幕下方，并且 CSS3 Pie 样式/背景/等位于正确的位置粘页脚去。

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

在 IE 中打开这个 jsfiddle，然后点击顶部的兼容性按钮（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 回答