CSS个人行为expression轻轻松松完成IE6无颤动固定不

日期:2020-10-21 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

简述:
IE6不适用固定不动精准定位(position:fixed)是大家都知道的事儿,因此大家要想在IE6做出固定不动精准定位的实际效果就只能用JS,可是用js会出現“颤动”的实际效果,因此有木有无需JS并且不颤动的方法呢?这是如何保证的呢?今日说说CSS中的个人行为expression。

甚么是个人行为-expression:
便是CSS特性后边能够是1段JS表述式,CSS特性的值等于JS表述式测算的結果。在表述式中能够立即引入元素本身的特性和方式,还可以应用别的访问器目标。这个表述式就仿佛是在这个元素的1个组员涵数中1样。

为何应用个人行为(expression)能处理难题:
由于CSS中应用expression仅有IE才可以鉴别。

完成方式:
在css中写入js编码:

拷贝编码
编码以下:

#backtop{
width: 40px;
height: 45px;
position:fixed;
right: 0px;
bottom: 10px;
z-index: 9;
//对于IE6
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop + 430));
border: none;
overflow:hidden;
}

这样1个,固定不动精准定位的难题处理了,可是也有难题,元素会颤动,这是为何
IE6中的元素为何会颤动的:
这是由于IE有1个多步的3D渲染过程。当你翻转或调剂你的访问器尺寸的情况下,它将重设全部內容并重画网页页面,这个情况下它就会再次解决css表述式,可是这是DOM构造是先于CSS展现出来,因此这会引发1个"颤动"bug,在此处固定不动部位的元素必须调剂以跟上你的(网页页面)翻转,因而就会颤动,处理此难题的技能便是应用background-attachment:fixed为body或html元素加上1个background-image。这就会强制性网页页面在重画以前先解决css。由于是在重画以前解决CSS,它也就会一样在重画以前最先解决你的css表述式。这将让你完成完善的光滑的固定不动部位元素!随后我发现background-image不用1张真正的照片,设定成about:blank就行。
元素颤动的处理方式:

拷贝编码
编码以下:

body {
//对于IE6在重画以前解决CSS
_background: url(about:blank);
_background-attachment: fixed;
}