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

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

WBOYoriginal: 2016-05-16 16:02:381405parcourir

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>

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)))}

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))}

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)))}

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de formulaire de validation de fonction HTML5 setCutomValidity() compétences Sharing_JavascriptArticle suivant：Exemple de formulaire de validation de fonction HTML5 setCutomValidity() compétences Sharing_Javascript

Articles Liés

Voir plus