IE6不兼容position:fixed属性的解决办法分享 _云知道

position: fixed;这个属性用起来确实很方便，可以轻松的实现固定位置的浮动层效果。但是，它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO，涉及左侧、右侧。及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案，欢迎来喷我。
下面是代码

复制代码代码如下:
!DOCTYPE HTML
html
head
meta charset="utf-8"
titleposition: fixedwebjx.com/title
style type="text/css"
* {
padding: 0;
margin: 0;
}
#content {
height: 5000px;
width: 50%;
border-right: 10px dotted red;
}
#demo_t, #demo_b, #demo_l, #demo_r {
background: #f90;
position: fixed;
}
#demo_t, #demo_b {
left: 0;
width: 100%;
}
#demo_l, #demo_r {
width: 50px;
top: 300px;
}
#demo_t {
top: 0;
}
#demo_b {
bottom: 0;
}
#demo_l {
left: 0;
}
#demo_r {
right: 0;
}
/style
!--[if lte IE 6]
style type="text/css"
html {
/*这个可以让IE6下滚动时无抖动*/
background: url(about:black) no-repeat fixed
}
#demo_t, #demo_b, #demo_l, #demo_r {
position: absolute;
}
#demo_t, #demo_b {
/*这个解决body有padding时，IE6下100%不能铺满的问题*/
width: expression(offsetParent.clientWidth);
}
/*下面三组规则用于IE6下top计算*/
#demo_l, #demo_r {
top: expression(offsetParent.scrollTop300);
}
#demo_t {
top: expression(offsetParent.scrollTop);
}
#demo_b {
top: expression(offsetParent.scrollTopoffsetParent.clientHeight-offsetHeight);
}
/style
![endif]--
/head
body
div id="demo_t"此处显示 id "demo" 的内容/div
div id="demo_b"此处显示 id "demo" 的内容/div
div id="demo_l"此处显示 id "demo" 的内容/div
div id="demo_r"此处显示 id "demo" 的内容/div
div id="content"/div
/body
/html

建议在实际使用时，将IE条件注释中的代码放在单独的css文件中，以便节约其他浏览器的流量。
顺便顶一下微软的这个项目，现在有中文版了，建议广大前端er加入这一行列，尽快灭亡IE6

IE6不兼容position:fixed属性的解决办法分享

推荐阅读

苹果App Store如何绑定支付宝账号？

老家的社保卡可以在外地用吗

青蛙吃什么

海藻面膜怎么加蜂蜜

红米K40SPro电池怎么样？红米K40SPro电池介绍

解决方法来了删除空白页怎么删

幽灵行动断点装备等级

84消毒液泡衣服几分钟

养金鱼有什么讲究吗

抗美援朝军人勋章可以发朋友圈吗

请教开机密码的问题。

怎样用空气炸锅烤红薯窍门

美味的炒饭

周口中原路位置在哪里,中原路机动车道养护

sony 28mm f2镜头怎么样,5.6镜头怎么样

巫师3哪个版本优化的好,巫师3值得买吗