首页 > 代码库 > IE6 fixed定位问题的解决办法
IE6 fixed定位问题的解决办法
在一般css代码编写的时候,IE6,IE6-IE8都可以使用自己的特有的css属性来改良某些bug,在解决IE6 fixed时就需要这种方式来做。
首先需要进行浏览器版本判断,当为小于等于IE6的版本时,载入IE6兼容性css
注意,这段代码的位置最好写在其他所有css导入代码之后
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="http://www.mamicode.com/lteIE6Hack.css" /> <![endif]-->
然后在lteIE6Hack.css编写自己的代码
为了让ie6支持fixed,需要使用ie6 css表达式语言
/*设置html,body背景属性,使得ie6被“fixed”后,当浏览器滚动时不会出现弹跳效果(抖动)*/ html,html body{ background-image:url(about:blank); background-attachment:fixed; } div.ie6_fixed{ position:absolute;/*只有fixed才能调整div在“盒子模型”中的z-Index*/ z-Index:100;/*设置垂直索引,只要大于当前div的容器即可。*/ left:expression(eval(document.documentElement.scrollLeft)) + 10; /*向右偏移10个像素*/ top:expression(eval(document.documentElement.scrollTop)) /**紧贴window顶部**/ }
以上是一种方案,但是有时为了简单,不在判断浏览其版本和不为ie6专门制定css的情况下做到fixed,可以使用ie6 css兼容属性来完成,这样做也可以减少浏览器请求网络的次数,但这种方式也会增加代码量。
下面代码一种有效的方式,common.css
html,body{ padding:0px; margin:0px; _background-image:url(about:blank); /*使用 “_”只有ie6能识别,"*"的话IE6-IE8都能识别*/ _background-attachment:fixed; } div.ie6_fixed{ position:fixed; left:10px; top:0px; _position:absolute; _left:expression(eval(document.documentElement.scrollLeft)) + 10; _top:expression(eval(document.documentElement.scrollTop)) z-Index:100; }
导入时不再判断浏览器版本
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/common.css" />
------------------------------------------------------------------------------------
这两种方式均可使用,至于你喜欢哪种,我只能说“我不知道”
IE6 fixed定位问题的解决办法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。