ie6 fixed bug的解决方法 (css+js)

在IE6浏览器中，"fixed"定位是一个众所周知的bug，它无法像在现代浏览器中那样正常工作。"fixed"定位通常用于创建始终固定在视口某个位置的元素，如导航栏或悬浮窗口。然而，IE6并不支持CSS的"fixed"定位，导致元素无法随页面滚动保持在屏幕上的固定位置。 解决这个问题的一种方法是结合使用CSS和JavaScript。我们可以为元素设置一个"absolute"定位，然后通过CSS选择器来覆盖原有的"fixed"定位。例如： ```css #fixed { position: absolute; top: 0; left: 0; width: 10em; height: 100%; } body > #fixed { position: fixed; } ``` 这里的`#fixed`元素会被设置为绝对定位，并且在`body`的直接子元素下，会被强制应用"fixed"定位。然而，这还不够，因为元素不会随着页面滚动而移动。 为了实现类似"fixed"的效果，我们需要添加JavaScript来监听滚动事件。以下是一个示例： ```javascript <script> function fixedPop1() { var m = 60; // top值 var obj = document.getElementById("TopDivInner"); // position:fixed对象 var n = 50; // top值 var obj2 = document.getElementById("TopDiv"); // position:fixed对象 window.onscroll = function() { obj2.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + n + 'px'; obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + m + 'px'; }; window.onresize = function() { obj2.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + n + 'px'; obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + m + 'px'; }; }; $(function() { fixedPop1(); }); </script> ``` 这段代码在页面加载时运行，设置了一个名为`fixedPop1`的函数，该函数会根据滚动条的位置动态调整元素的位置。当页面滚动时，`onscroll`和`onresize`事件会更新元素的"top"属性，使元素看起来像是固定在屏幕上。 尽管这种方法在大多数情况下都能工作，但还存在一个问题：在IE6中，当用户快速滚动时，元素可能会闪烁。为了解决这个问题，可以使用CSS表达式（_expression_），这是IE6特有的一个特性： ```css #topNav { position: fixed; top: 0px; _position: absolute; _top: expression(document.compatMode == "CSS1Compat" ? document.documentElement.scrollTop : document.body.scrollTop); } ``` 这里，`_top: expression`是IE6的特有语法，它会根据表达式的计算结果动态更新元素的"top"属性。这种方法虽然能解决闪烁问题，但可能会增加页面的内存占用，因为CSS表达式会不断重新计算。 解决IE6的"fixed"定位bug需要结合CSS的hack和JavaScript，以模拟现代浏览器中的"fixed"定位行为。虽然这种方法可以达到预期效果，但同时也增加了代码的复杂性和可能的性能问题。在现代浏览器广泛使用的今天，为IE6单独优化已经变得不那么常见，但在维护旧项目时，理解这些技巧仍然是必要的。