Heim > Artikel > Web-Frontend > Detaillierte Einführung in die Kompatibilitätsverarbeitung neuer HTML5-Tags (Bild)

Detaillierte Einführung in die Kompatibilitätsverarbeitung neuer HTML5-Tags (Bild)

黄舟Original: 2017-03-31 13:34:322129Durchsuche

HTML5Obwohl die neuen semantischen Tags viele Vorteile haben, gibt es immer noch Kompatibilitätsprobleme in niedrigeren Versionen des alten IE-Browsers, was den Leuten oft Kopfschmerzen bereitet. Sollte ich sie mutig verwenden? Neue Tags verwenden oder eine große Anzahl herkömmlicher bedeutungsloser DIV-Tags verwenden? Heute werfen wir einen kurzen Blick auf die Kompatibilität der neuen H5-Tags.

Schauen wir uns zunächst einen kurzen Teil des einfachen Codes an:

HTML-Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
 
    <style>
        header, footer{width:50px; height: 50px; background-color: #f00;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
 
</body>
</html>

Google-Browser:

Detaillierte Einführung in die Kompatibilitätsverarbeitung neuer HTML5-Tags (Bild)

Unter dem IE6-Browser:

Detaillierte Einführung in die Kompatibilitätsverarbeitung neuer HTML5-Tags (Bild)

Natürlich werden die Kopf- und Fußzeile in Browsern, die das neue H5-Tag unterstützen, als Elemente auf Blockebene gerendert, während in IE8 und niedriger Es wird im Browser als Text gerendert und der Stil funktioniert nicht, was darauf hinweist, dass es nicht unterstützt wird. Wie lässt sich das Problem lösen?

Die erste Methode besteht zunächst darin, die DOM-Operation zu verwenden, um diese Tags hinzuzufügen. Da der Browser dies nicht unterstützt, werde ich selbst eines erstellen:

HTML Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script>
        document.createElement(&#39;header&#39;);
        document.createElement(&#39;footer&#39;);
    </script>
    <style>
        header, footer{display: block; width:50px; height: 50px; background-color: #f00;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
 
</body>
</html>

Werfen wir zu diesem Zeitpunkt einen Blick auf den Anzeigeeffekt des IE6-Browsers:

Detaillierte Einführung in die Kompatibilitätsverarbeitung neuer HTML5-Tags (Bild)

Die rote Hintergrundfarbe kann angezeigt werden. Dies zeigt an, dass die Methode .createElement() durch das Dokument möglich ist. Warum funktionieren Breite und Höhe des Stils nicht? Da das hinzugefügte Element Inline-Element ist, haben Inline-Elemente keine Breite und Höhe. Nachdem wir dies verstanden haben, fügen wir der Kopf- und Fußzeile im Fall und sehen Sie, wie sich der Effekt verändert.

Der vom IE6-Browser angezeigte Effekt:

<style>
    header, footer{display: block; 
                   width:50px; height: 50px; 
                   background-color: #f00;}
</style>

Detaillierte Einführung in die Kompatibilitätsverarbeitung neuer HTML5-Tags (Bild) Der jetzt angezeigte Effekt ist genau derselbe, den wir brauchen, nämlich durch Diese Methode kann das Kompatibilitätsproblem neuer H5-Tags in alten IE-Browsern lösen. Eine andere Frage ist jedoch: Wäre es bei so vielen neuen Etiketten zu aufwendig, wenn jedes einzelne auf diese Weise hergestellt werden müsste?

Also stellen wir jetzt die zweite Methode vor, indem wir die von Senior Daniel gepackte js-Bibliothek direkt ausleihen --- html5shiv.js

HTML-Code:

Dann wir Sie können den IE6-Browser direkt öffnen, um den Effekt zu sehen:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script src="js/html5shiv.js"></script>
 
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
<script src="js/jquery-1.11.0.min.js"></script>
 
<script>
    $(&#39;#header&#39;).css(&#39;color&#39;,&#39;#f00&#39;);
    $(&#39;#footer&#39;).css({&#39;width&#39;:&#39;100px&#39;,&#39;height&#39;:&#39;100px&#39;,
                      &#39;border&#39;:&#39;1px solid #ddd&#39;,
                      &#39;backgroundColor&#39;:&#39;#f00&#39;});
    $(&#39;#header&#39;).html(&#39;我是一只小小鸟&#39;);
</script>
 
</body>
</html>

Detaillierte Einführung in die Kompatibilitätsverarbeitung neuer HTML5-Tags (Bild) Es kann den gewünschten Effekt vollständig erzielen, und die Bedienung ist einfacher und die Codemenge ist geringer Machen Sie es auch in den Browsern IE7 und IE8.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Kompatibilitätsverarbeitung neuer HTML5-Tags (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Implementierungscode-Sharing der benutzerdefinierten HTML5-MaskeNächster Artikel：Implementierungscode-Sharing der benutzerdefinierten HTML5-Maske

In Verbindung stehende Artikel

Mehr sehen