js résout parfaitement la technique bug_javascript d'IE6 ne prenant pas en charge la position : corrigée-js tutoriel-php.cn

js résout parfaitement la technique bug_javascript d'IE6 ne prenant pas en charge la position : corrigée

WBOY

Libérer： 2016-05-16 16:02:38

original

1399 Les gens l'ont consulté

Regardons d'abord le code

<!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>

Copier après la connexion

Le code ci-dessus est très courant sur Internet. Il obtient l'effet position:fixed sous IE6 en définissant html{overflow:hidden} et body{height:100%;overflow:auto}. Cependant, cette méthode présente un défaut. C'est-à-dire que l'absolu original et la relation sur la page deviendront des effets fixes. Je ne ferai pas de démo ici. Si vous avez des doutes, vous pouvez l'essayer vous-même.

J'ai donc cherché des informations et découvert que l'effet position:fixed sous ie6 peut être parfaitement réalisé grâce à une expression CSS dans Internet Explorer. Le code CSS est le suivant :

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

Copier après la connexion

Le code ci-dessus peut être utilisé directement. Si vous souhaitez définir la marge flottante d'un élément, vous devez la définir deux fois. Par exemple, si vous souhaitez qu'un élément soit à 10 pixels du haut et à 10 pixels du haut. à gauche, alors tu dois faire ça Zi a écrit :

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

Copier après la connexion

De cette façon, l'effet de position:fixed sous IE6 est résolu, et cela n'affectera pas les autres absolus et relations. Cependant, il y a toujours un problème, c'est-à-dire que les éléments suspendus vibreront

IE a un processus de rendu en plusieurs étapes. Lorsque vous faites défiler ou redimensionnez votre navigateur, il réinitialise tout et redessine la page, après quoi il retraite les expressions CSS. Cela peut provoquer un vilain bug de "vibration", où les éléments à position fixe doivent s'ajuster pour suivre votre défilement (de la page), et ainsi "sauter".
L'astuce pour résoudre ce problème consiste à ajouter une image d'arrière-plan au corps ou à l'élément HTML en utilisant background-attachment:fixed. Cela oblige la page à traiter le CSS avant de repeindre. Parce qu'il traite le CSS avant de repeindre, il traitera également vos expressions CSS avant de repeindre. Cela vous permettra de réaliser des éléments en position fixe parfaitement lisses !
Ensuite, j'ai découvert que l'image d'arrière-plan n'avait pas besoin d'une vraie image, il suffit de la définir sur about:blank.

Le code complet est joint ci-dessous

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

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.