CSS表述式(expression)处理IE6 position:fixed失效难题

日期:2021-01-20 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

空话很少说,先看1下下面这段编码:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>IE6 position:fixed bug</title>
<style>
*{padding:0;margin:0}
p{height:2000px}
#gs{border:1px solid #000;position:fixed;right:30px;top:120px}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]-->
</head>
<body>
<div id="rightform">
<p>111111</p>
<input id="gs" name="gs" type="text" value="" />
</div>
</body>
</html>

以上这段编码在网络上很普遍,根据设定html{overflow:hidden}和body{height:100%;overflow:auto}来完成ie6下position:fixed实际效果,但这类方法有个缺点,那便是:这会使网页页面上原来的absolute、relation都变为fixed的实际效果,在这里我就不做demo了,假如有怀疑,能够自身去实验1下。
因而我找了下材料,发现能够根据1条Internet Explorer的CSS表述式(expression)来完善的完成ie6下position:fixed实际效果,css编码以下:

拷贝编码
编码以下:

/* 除IE6访问器的通用性方式 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6访问器的独有方式 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

上面编码能够立即应用了,假如要设定元素飘浮边距,要各自为设定两次,例如我要让某个元素距顶部10个像素,距左部也是10个像素,那就要这模样写:

拷贝编码
编码以下:

/* 除IE6访问器的通用性方式 */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6访问器的独有方式 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}

这样1来,IE6下完成position:fixed的实际效果处理了,并且也不容易危害到别的的absolute、relation,但也有1个难题,便是飘浮的元素会出現震动

IE有1个多步的3D渲染过程。当你翻转或调剂你的访问器尺寸的情况下,它将重设全部內容并重画网页页面,这个情况下它就会再次解决css表述式。这会引发1个丑恶的“震动”bug,在此处固定不动部位的元素必须调剂以跟上你的(网页页面的)翻转,因而就会“颤动”。
处理此难题的技能便是应用background-attachment:fixed为body或html元素加上1个background-image。这就会强制性网页页面在重画以前先解决CSS。由于是在重画以前解决CSS,它也就会一样在重画以前最先解决你的CSS表述式。这将让你完成完善的光滑的固定不动部位元素!

随后我发现background-image不用1张真正的照片,设定成about:blank就可以了。

下面附上详细编码

拷贝编码
编码以下:

/* 除IE6访问器的通用性方式 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6访问器的独有方式 */
/* 调整IE6震动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}