Node.js는 position:fixed를 지원하지 않는 IE6의 bug_javascript 기술을 완벽하게 해결합니다.-JS 튜토리얼-php.cn

Node.js는 position:fixed를 지원하지 않는 IE6의 bug_javascript 기술을 완벽하게 해결합니다.

WBOY

풀어 주다： 2016-05-16 16:02:38

원래의

1402명이 탐색했습니다.

먼저 코드를 살펴보겠습니다

<!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:100%;overflow:auto}를 설정하여 IE6에서 위치:고정 효과를 얻습니다. 그러나 이 방법에는 결함이 있습니다. 즉, 페이지의 원래 절대값과 관계가 고정된 효과가 됩니다. 의심스러운 점이 있으면 직접 시도해 보세요.

그래서 정보를 찾아보니 ie6에서의 position:fixed 효과는 Internet Explorer의 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픽셀로 설정해야 합니다. 왼쪽으로 이동하려면 다음을 수행해야 합니다. Zi는 다음과 같이 썼습니다.

/* 除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의 효과가 해결되어 다른 절대값과 관계에 영향을 미치지 않습니다. 그러나 여전히 문제가 있습니다. 즉, 정지된 요소가 진동한다는 것입니다.

IE에는 다단계 렌더링 프로세스가 있습니다. 브라우저를 스크롤하거나 크기를 조정하면 모든 것이 재설정되고 페이지가 다시 그려지며, 이때 CSS 표현식이 다시 처리됩니다. 이로 인해 고정 위치 요소가 (페이지의) 스크롤을 따라잡아 "점프"하도록 조정해야 하는 추악한 "진동" 버그가 발생할 수 있습니다.
이 문제를 해결하는 방법은 background-attachment:fixed를 사용하여 body 또는 html 요소에 배경 이미지를 추가하는 것입니다. 이렇게 하면 페이지를 다시 그리기 전에 CSS를 처리하게 됩니다. 다시 그리기 전에 CSS를 처리하므로 다시 그리기 전에 CSS 표현식도 먼저 처리합니다. 이를 통해 완벽하게 부드러운 고정 위치 요소를 얻을 수 있습니다!
그런 다음 배경 이미지에는 실제 그림이 필요하지 않다는 것을 알았습니다. 단지 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)))}

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.