CSS3 PIE 在 IE7 中将粘滞页脚推离屏幕答案

【问题标题】：CSS3 PIE pushes sticky footer off screen in IE7CSS3 PIE 在 IE7 中将粘滞页脚推离屏幕
【发布时间】：2012-08-28 21:37:53
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： html css sticky-footer css3pie

【解决方案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');
}

【讨论】：

+1 表示适用于此示例的解决方案。但是，我可能过于简化了它，因为我实际页面上的页脚现在还有其他问题。我找到了我正在使用的原始模板，在其页脚中添加了 PIE 样式，并用您的解决方案重现了问题。
好的，here's the fiddle 你的解决方案和我正在使用的实际模板。页脚与上面的列失去了对齐。 jsfiddle.net/johntrepreneur/8rZWu/embedded/result
没用。我更新了示例中的 #footer 部分，两个 cmets (jsfiddle.net/johntrepreneur/8rZWu/embedded/result) 并且页脚仍然左对齐。
注意：具体来说，它在 IE9 和 IE 兼容模式下不起作用。