手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >IE6不兼容position:fixed属性的解决办法分享
IE6不兼容position:fixed属性的解决办法分享
摘要: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

【IE6不兼容position:fixed属性的解决办法分享】相关文章:

CSS3中动画属性transform、transition和animation属性的区别

css中background-size属性使用介绍

DIV边距属性在Chrome和IE中的区别

使用position:fixed属性让DIV居中

CSS的position属性在DIV层中的应用

css position详解

在ie7下css居中样式text-align:center;偏左问题解决方法

ie placeholder属性的兼容性问题解决方法

不同浏览器兼容的CSS编码准则

Google浏览器CSS居中兼容问题完美解决方法

精品推荐
分类导航