首页 > 代码库 > 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定位问题的解决办法