suchen

Heim >Web-Frontend >js-Tutorial >js löst perfekt die bug_javascript-Technik von IE6, die position:fixed nicht unterstützt

js löst perfekt die bug_javascript-Technik von IE6, die position:fixed nicht unterstützt

WBOY
WBOYOriginal
2016-05-16 16:02:381405Durchsuche

Schauen wir uns zuerst den Code an

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

Der obige Code ist im Internet sehr verbreitet. Er erzielt den position:fixed-Effekt unter IE6, indem html{overflow:hidden} und body{height:100%;overflow:auto} festgelegt werden Das heißt: Dadurch werden die ursprünglichen Absolut- und Beziehungseffekte zu festen Effekten. Wenn Sie Zweifel haben, können Sie es selbst versuchen.

Also habe ich nach Informationen gesucht und festgestellt, dass der position:fixed-Effekt unter ie6 perfekt durch einen CSS-Ausdruck im Internet Explorer realisiert werden kann. Der CSS-Code lautet wie folgt: 

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

Der obige Code kann direkt verwendet werden. Wenn Sie den schwebenden Rand eines Elements festlegen möchten, müssen Sie ihn beispielsweise zweimal festlegen, wenn Sie möchten, dass ein Element 10 Pixel vom oberen Rand und 10 Pixel vom oberen Rand entfernt ist links, dann musst du das tun. Zi schrieb: 

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

Auf diese Weise wird der Effekt von position:fixed unter IE6 gelöst und hat keine Auswirkungen auf andere absolute und relative Elemente. Es besteht jedoch immer noch ein Problem, nämlich dass schwebende Elemente vibrieren

IE verfügt über einen mehrstufigen Rendering-Prozess. Wenn Sie einen Bildlauf durchführen oder die Größe Ihres Browsers ändern, wird alles zurückgesetzt und die Seite neu gezeichnet. Anschließend werden die CSS-Ausdrücke erneut verarbeitet. Dies kann einen hässlichen „Vibrations“-Bug verursachen, bei dem Elemente mit fester Position angepasst werden müssen, um mit Ihrem Scrollen (der Seite) Schritt zu halten, und somit „springen“.
Der Trick zur Lösung dieses Problems besteht darin, mithilfe von „background-attachment:fixed“ ein Hintergrundbild zum Body- oder HTML-Element hinzuzufügen. Dadurch wird die Seite gezwungen, das CSS vor dem Neuzeichnen zu verarbeiten. Da es CSS vor dem Neuzeichnen verarbeitet, verarbeitet es auch zuerst Ihre CSS-Ausdrücke, bevor es neu zeichnet. Dadurch erhalten Sie perfekt glatte Elemente mit fester Position!
Dann habe ich festgestellt, dass das Hintergrundbild kein echtes Bild benötigt. Setzen Sie es einfach auf about:blank.

Der vollständige Code ist unten angehängt

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-SetCutomValidity()-Funktionsvalidierungsformular, Beispiel für Sharing_Javascript-KenntnisseNächster Artikel：HTML5-SetCutomValidity()-Funktionsvalidierungsformular, Beispiel für Sharing_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen