Question

根据我的CSS，包括IE7在内的所有浏览器都会显示我的底栏正确并且已经固定。

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

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

但是如果你调整浏览器窗口顶部或底部的窗口高度，那么bar / div就会像位置绝对而不是位置那样卡在位置上：固定。

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

（使用HTML5的Doctype）

Answer 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");
    }
}

然而。我准备好了更好的解决方案。

Answer 2

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

Answer 3

有同样的问题，但我的案例中的修复是父母有position: relative。一旦我删除了，这个问题就消失了。

Answer 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>

非常重要那些在第一线。

IE8固定位置top＆amp;底部调整大小错误

4 个答案: