IE6不兼容position:fixed属性的解决办法分享
IE6不兼容position:fixed属性的解决办法分享
发布时间:2016-12-27 来源:查字典编辑
摘要:position:fixed;这个属性用起来确实很方便,可以轻松的实现固定位置的浮动层效果。但是,它不支持IE6及以下版本。于是很多同学使用...

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

下面是代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>position: fixed——webjx.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>

<>

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类