www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

js完美解决IE6不支持position

2019-07-19 09:44 来源:未知

先来看段代码

js完美化解IE6不补助position:fixed的bug,ie6fixed

先来看段代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>11111111111111111</p>
<input id="gs" name="gs" type="text" value="" />
</div>
</body>
</html>

以上这段代码在网上很普遍,通过安装html{overflow:hidden}和body{height:百分之百;overflow:auto}来贯彻ie6下position:fixed效果,但这种措施有个缺陷,那就是:这会使页面上原有的absolute、relation都改为fixed的成效,在此处自个儿就不做demo了,尽管有思疑,能够友善去考试弹指间。

于是乎笔者找了下资料,开掘能够透过一条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)))}

地点代码可以直接采取了,要是要安装成分悬浮边距,要分别为设置三次,比方本人要让有些成分距顶上部分13个像素,距左部也是拾贰个像素,那将要那标准写:

/* 除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))}

那样一来,IE6下促成position:fixed的功力化解了,并且也不会影响到其余的absolute、relation,但还有贰个难点,就是浮动的因素会冒出震荡

IE有二个多步的渲染进程。当你滚动或调节你的浏览器大小的时候,它将重新载入参数全部剧情同仁一视画页面,这一年它就能重新管理css表明式。那会引起一个其貌不扬的“振动”bug,在那边固定地点的因素须要调动以跟上你的(页面包车型的士)滚动,于是就能够“跳动”。
消除此难点的技巧就是行使background-attachment:fixed为body或html成分增加八个background-image。那就能够强制页面在重画此前先处理CSS。因为是在重画以前管理CSS,它也就团体首领久以来在重画以前率先处理你的CSS表明式。那将让您兑现周详的平缓的一向地点成分!
接下来自身意识background-image没有供给一张真实的图形,设置成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)))}

如上所述就是本文的全体内容了,希望我们能够喜欢。

先来看段代码 !DOCTYPE htmlhtmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titleIE6 positi...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>11111111111111111</p>
<input id="gs" name="gs" type="text" value="" />
</div>
</body>
</html>

以上这段代码在网络很广阔,通过安装html{overflow:hidden}和body{height:百分百;overflow:auto}来落到实处ie6下position:fixed效果,但这种艺术有个破绽,那便是:那会使页面上本来的absolute、relation都造成fixed的效率,在那边自身就不做demo了,假如有疑虑,能够自身去考试瞬间。

于是乎作者找了下资料,发掘可以通过一条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)))}

地方代码能够直接选取了,借使要安装元素悬浮边距,要分别为设置五遍,比方自个儿要让有些元素距顶端十二个像素,距左部也是十二个像素,那就要那标准写:

/* 除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))}

这样一来,IE6下促成position:fixed的功能消除了,并且也不会影响到别的的absolute、relation,但还会有二个难点,便是浮动的因素汇合世震荡

IE有一个多步的渲染进程。当你滚动或调度你的浏览器大小的时候,它将重新初始化全部剧情同等对待画页面,那年它就能够重新管理css表明式。这会唤起一个其貌不扬的“振动”bug,在此地固定地方的因素须要调动以跟上你的(页面包车型地铁)滚动,于是就能够“跳动”。
消除此难题的本领正是应用background-attachment:fixed为body或html成分增添一个background-image。那就能够强制页面在重画在此之前先管理CSS。因为是在重画此前管理CSS,它也就社长久以来在重画从前率先管理你的CSS表明式。那将让您兑现全面包车型地铁平整的固定地方成分!
接下来自身意识background-image没有要求一张真实的图纸,设置成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)))}

上述所述正是本文的全体内容了,希望大家能够欣赏。

您大概感兴趣的稿子:

  • JS 滚动事件window.onscroll与position:fixed写包容IE6的回到顶上部分组件
  • ie6,ie7,ie8完美辅助position:fixed的终点消除方案
  • javascript ie6包容position:fixed达成思路
  • IE6协理position:fixed完美消除措施
  • 详解IE6中的position:fixed难点与随滚动条滚动的意义
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:js完美解决IE6不支持position