HTML5新しいセマンティック タグには多くの利点がありますが、低バージョンの古いIE ブラウザでは依然として互換性の問題があり、新しいタグを大胆に使用するべきか、それとも従来のタグを多く使用するべきか、頭を悩ませることがよくあります。 DIVの意味のないタグ?今日は、H5 の新しいタグの互換性について簡単に説明します。
まず簡単なコードの小さな部分を見てください:
HTML コード:
测试H5新标签兼容性 header
Google ブラウザーの場合:
IE6 ブラウザーの場合:
明らかに、ヘッダーとフッターは H5 の新しいタグをサポートしています。レベル要素はブラウザで表示されますが、IE8 以下のブラウザではテキストとして表示され、スタイルが機能せず、サポートされていないことが示されます。
まず、最初の方法は、DOM操作を使用してこれらのタグを追加することです。ブラウザがサポートしていないため、自分で作成します:
HTMLコード:
测试H5新标签兼容性 header
このとき、 IE6 のブラウジングを見てください。 デバイスの表示効果:
赤い背景色が表示されます。これは document.createElement() のメソッドが実行可能であることを示していますが、スタイルの幅と高さが機能しないのはなぜですか?追加された要素はinline要素なので、inline要素には幅も高さもありません。これを理解した上で、ケースのヘッダーとフッターに「display: block;」属性を追加して効果を確認します。変更されます。
IE6 ブラウザの表示効果:
現在の表示効果は、必要なものとまったく同じです。つまり、この方法で古い IE ブラウザの H5 新しいタグの互換性の問題を解決できることになります。しかし、もう一つの疑問は、新しいラベルがたくさんある場合、それぞれをこの方法で作成しなければならない場合、あまりにも面倒ではないでしょうか?
そこで、ここでは 2 番目の方法を紹介します。ダニエル先輩によってパッケージ化された js ライブラリを直接借用します --- html5shiv.js
HTML コード:
测试H5新标签兼容性 header
次に、IE6 ブラウザを直接開いて効果を確認します:
望む効果を完全に実現でき、操作はより簡単で、コードの量も少なくなります。IE7 および IE8 ブラウザーでテストすることもできます。
以上がHTML5新タグの互換処理を詳しく紹介(写真)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。