IE6浏览器不支持固定定位（position：fixed）解决方案

　　经过多次测试，原来不只在IE6下，在IE7、IE8浏览器下，若是文档使用的是怪异（quirk）模式也会导致这个问题。这也难怪，当IE7、8使用怪异模式时，渲染引擎将以接近IE6的渲染模式来解析CSS。最后，我得出了以下结论：

　　 IE6、IE7（quirk模式）、IE8（quirk模式）浏览器将 'position' 特性的 fixed 值当作错误值处理。从而导致使用固定定位的元素使用 'position' 的默认值 static。即这个元素在此时变成了普通流中的元素，这必然会导致布局错位等问题。

　　解决方案： 　　

　　在 IE6、IE7（quirk模式）、IE8（quirk模式）中为固定定位元素设置 '_position:absolute'，再通过 JavaScript 脚本或者 CSS Expression 动态设置其偏移量，但是我发现只能实现在最底部和最顶部固定。要想设置具体的位置还需要配合_margin。

使元素固定在浏览器的顶部：

代码如下:

#top {
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop));
}

使元素固定在浏览器的底部：

代码如下:

#bottom {
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

　　这两段代码只能实现在最底部跟最顶部，你可以使用 _margin修改其中的数值控制元素的位置。

　　看到这里，你一定以为已经完事了。NO！还有bug：被固定定位的元素在滚动滚动条的时候会出现一闪一闪的情况。解决这个问题的办法是在 CSS 文件中加入：

代码如下:

* html{
background-image:url(about:blank);
background-attachment:fixed;
}

或者：

代码如下:

body {
_background-attachment:fixed;
_background-image:url(about:blank);
}

　　当然，也可以用吧javascript方法解决，不过有点大材小用：

代码如下:

window.onresize = window.onscroll = function(){
//code
};

IE6浏览器不支持固定定位（position：fixed）解决方案相关推荐

跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
html定位浏览器兼容,IE6浏览器不支持固定定位（position：fixed）解决方案
今天在学习的时候,突然发现在IE6浏览器下,position:fixed不管用了: 复制代码代码如下: New Document 正常普通流元素 position:fixed元素上面的代码在IE6中 ...
position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
关于固定定位position: fixed；和横向滚动overflow-x: scroll；无法同时使用的问题
在做项目时遇到一个功能是要把某个盒子固定在底部,并且是要横向滑动的,发现position: fixed;和overflow-x: scroll;同时使用无效,现记录一下解决方法 <style&g ...
解决固定定位position: fixed；变成了绝对定位随屏幕滚动的问题
在一次vue项目开发中发现按钮设置成固定定位后,依旧随屏幕滚动,变成了相对定位的效果. 查阅资料后发现: 父级元素设置有效的transform属性会导致子元素固定变成绝对元素, 此时会导致子元素和父级 ...
华为手机浏览器不支持PUT提交方式的解决方案
华为手机浏览器不支持PUT提交方式的解决方案参考文章: (1)华为手机浏览器不支持PUT提交方式的解决方案 (2)https://www.cnblogs.com/zhuyuannet/p/51830 ...
中文版Chrome浏览器不支持12px以下字体的解决方案
中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...
两种解决IE6不支持固定定位的方法
有两种让IE6支持position:fixed 1.用CSS执行表达式 *{margin:0;padding:0;} * html,* html body{ background-image:url( ...

IE6浏览器不支持固定定位（position：fixed）解决方案

IE6浏览器不支持固定定位（position：fixed）解决方案相关推荐

最新文章

热门文章