IE8 固定位置顶部和底部调整大小错误答案

【问题标题】：IE8 fixed position top & bottom resize bugIE8 固定位置顶部和底部调整大小错误
【发布时间】：2011-09-30 12:13:50
【问题描述】：

根据我的 CSS，包括 IE7 在内的所有浏览器都始终正确且固定地显示我的底栏。

.bottom-fixed {
    position: fixed;
    bottom: 0;
    margin-left: -235px;
    min-width: 1160px;
    max-width: 130em;
    width: 100%;
}

但是在 IE8 中有一些奇怪的地方。如果您在底部的右上角的帮助下调整浏览器窗口的高度（您可以同时更改窗口的宽度和高度），一切都很好。

但是，如果您调整窗口高度以抓住浏览器窗口的顶部或底部，则 bar/div 会停留在位置，就像 position 是绝对而不是 position: fixed 时一样。

知道如何解决这个问题吗？

（在 HTML5 中使用 Doctype）

【问题讨论】：

标签： css html internet-explorer-8 css-position

【解决方案1】：

我无法使用来自 thread Umer mentioned 的父浮动解决方案来解决这个问题。

所以我用一个简单的 Javascript 脚本修复它

HTML

<!--[if IE 8 ]>
    <script type="text/javascript">
        $(window).resize(function () {
            ApplyPositionFixed();
        });
    </script>
    <![endif]-->

Javascript

function ApplyPositionFixed() {
    // Check if element exists
    if ($("#bottom-bar-content").length) {
        $(".bottom-fixed").attr('style', 'position: fixed;');
        console.log("Window resized");
    }
    else {
        console.info("No element changes on Window resize");
    }
}

但是。我已准备好寻求更好的解决方案。

【讨论】：

【解决方案2】：

还有另一种解决方案：在父元素上显式设置height。例如height: 1% 或height: 100%。

【讨论】：

【解决方案3】：

有同样的问题，但在我的情况下，解决方法是父母有position: relative。一旦我删除它，这个问题就消失了。

【讨论】：

【解决方案4】：

对于 IE 8 中的固定位置 - , DOCTYPE 非常非常重要。

其中之一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

或

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

或

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

或

<!DOCTYPE HTML>

而且非常重要的是那些在第一行。

【讨论】：

好吧，正如所写，我使用了 HTML5 文档类型。看来情况并非如此。