検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5新タグの互換処理を詳しく紹介（写真）

HTML5新タグの互換処理を詳しく紹介（写真）

黄舟
黄舟オリジナル
2017-03-31 13:34:322189ブラウズ

HTML5 新しいセマンティック タグには多くの利点がありますが、低バージョンの古い IE ブラウザ では依然として互換性の問題があり、新しいタグを大胆に使用するべきか、それとも従来のタグを多く使用するべきか、頭を悩ませることがよくあります。 DIVの意味のないタグ？今日は、H5 の新しいタグの互換性について簡単に説明します。

まず簡単なコードの小さな部分を見てください:

HTML コード: 

<!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 ブラウザーの場合:

HTML5新タグの互換処理を詳しく紹介（写真）

IE6 ブラウザーの場合:

HTML5新タグの互換処理を詳しく紹介（写真）

明らかに、ヘッダーとフッターは H5 の新しいタグをサポートしています。レベル要素はブラウザで表示されますが、IE8 以下のブラウザではテキストとして表示され、スタイルが機能せず、サポートされていないことが示されます。

まず、最初の方法は、DOM操作を使用してこれらのタグを追加することです。ブラウザがサポートしていないため、自分で作成します:

HTMLコード: 

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

このとき、 IE6 のブラウジングを見てください。 デバイスの表示効果:

HTML5新タグの互換処理を詳しく紹介（写真）

赤い背景色が表示されます。これは document.createElement() のメソッドが実行可能であることを示していますが、スタイルの幅と高さが機能しないのはなぜですか?追加された要素はinline要素なので、inline要素には幅も高さもありません。これを理解した上で、ケースのヘッダーとフッターに「display: block;」属性を追加して効果を確認します。変更されます。 

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

IE6 ブラウザの表示効果:

HTML5新タグの互換処理を詳しく紹介（写真）

現在の表示効果は、必要なものとまったく同じです。つまり、この方法で古い IE ブラウザの H5 新しいタグの互換性の問題を解決できることになります。しかし、もう一つの疑問は、新しいラベルがたくさんある場合、それぞれをこの方法で作成しなければならない場合、あまりにも面倒ではないでしょうか？

そこで、ここでは 2 番目の方法を紹介します。ダニエル先輩によってパッケージ化された js ライブラリを直接借用します --- html5shiv.js

HTML コード: 

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

次に、IE6 ブラウザを直接開いて効果を確認します:

HTML5新タグの互換処理を詳しく紹介（写真）

望む効果を完全に実現でき、操作はより簡単で、コードの量も少なくなります。IE7 および IE8 ブラウザーでテストすることもできます。

以上がHTML5新タグの互換処理を詳しく紹介（写真）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：html5カスタムマスクの実装コード共有次の記事：html5カスタムマスクの実装コード共有

関連記事

続きを見る