js是IE6不支持的位置,一个完美的解决方案:固定的bug
IE6的位置:固定的错误
{填充:0;边距:0 }
P {身高:2000px }
# GS { border: 1px solid # 000;位置:固定;右:30px;顶部:120px }
html {溢出:隐藏}
身体{高度:100%;溢出:自动}
# GS { }:绝对位置
一万一千一百一十一万亿、一千一百一十亿零一百、一千一百一十一万一千零一和十一
上面的代码是很常见的在互联网上,通过设置html { }和{溢出:隐藏身体高度:100%;溢出:汽车} IE6的位置:固定实现的结果,但这种方法,是一种缺陷:它将使原来的绝对关系页为固定效应,我不在这里演示,如果有任何疑问,你可以去试。
所以我找的资料,发现Internet Explorer的CSS表达式(expression)可以用来实现位置:固定效应在IE6完全。CSS代码如下所示:
除了一般的方法对IE6浏览器 / * * /
。ie6fixedtl {位置:固定;左:0;最高:0 }
。ie6fixedbr {位置:固定;右:0;下:0 }
独特的方法对IE6浏览器 / * * /
* HTML。ie6fixedtl {位置:绝对;左:表达(eval(文档。文档元素}。scrollLeft));顶部:表达(eval(文档。文档元素}。scrollTop))}。
HTML *。ie6fixedbr {位置:绝对;左:表达(eval(文档。文档元素}。scrollLeft +文档。文档元素}。clientwidth这。offsetwidth)-(parseInt(this.currentstyle.marginleft,10)-(0 | | parseInt()this.currentstyle.marginright,10);顶部:表达(| | eval(0)文档。文档元素}。scrollTop +文档。文档元素}。自己的本。offsetheight -)(parseInt(this.currentstyle.margintop,10)-(0 | | parseInt()this.currentstyle.marginbottom,10)| | 0)))}
以上代码可以直接使用,如果要设置悬浮元素的边距设置为2倍,例如,我想使一个元素从顶部的10个像素从左边是10像素,应该是这样写的:
除了一般的方法对IE6浏览器 / * * /
。ie6fixedtl {位置:固定;左:10px;顶部:10px }
独特的方法对IE6浏览器 / * * /
* HTML。ie6fixedtl {位置:绝对;左:表达(eval(文档。文档元素}。scrollLeft + 10));顶部:表达(eval(文档。文档元素}。scrollTop + 10))}。
这样,定位的效果:固定在IE6的问题解决了,也不会影响其他的或绝对的关系,但是还有一个问题,那就是,悬挂单元会震动。
IE有一个多步骤的绘制过程。当你滚动或调整你的浏览器的大小,它将重置所有内容和重绘页面,这一次它将重新处理CSS的表达。这使一个丑陋的振动的BUG,在固定的元素在这里需要调整跟上你(页)滚动,然后它将打败。
要解决这个问题是使用背景附件:固定添加背景图像对身体或HTML元素。这将迫使网页CSS之前重新粉刷。因为它是处理CSS之前将重新划分,同时在第一处理CSS重绘你的表达。这会让你实现一个完美的平滑的固定位置的元素!
然后我发现背景图像不需要一个真实的图片,并将其设置为:空白。
完整的代码附在下面。
除了一般的方法对IE6浏览器 / * * /
。ie6fixedtl {位置:固定;左:0;最高:0 }
。ie6fixedbr {位置:固定;右:0;下:0 }
独特的方法对IE6浏览器 / * * /
修正bug IE6 / * * /振动
* HTML,* HTML正文*背景图片:URL(关于:空白);背景附件:固定}
* HTML。ie6fixedtl {位置:绝对;左:表达(eval(文档。文档元素}。scrollLeft));顶部:表达(eval(文档。文档元素}。scrollTop))}。
HTML *。ie6fixedbr {位置:绝对;左:表达(eval(文档。文档元素}。scrollLeft +文档。文档元素}。clientwidth这。offsetwidth)-(parseInt(this.currentstyle.marginleft,10)-(0 | | parseInt()this.currentstyle.marginright,10);顶部:表达(| | eval(0)文档。文档元素}。scrollTop +文档。文档元素}。自己的本。offsetheight -)(parseInt(this.currentstyle.margintop,10)-(0 | | parseInt()this.currentstyle.marginbottom,10)| | 0)))}
以上是本文的全部内容,希望大家能喜欢。