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

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

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

HTML コード:

      
  
header
   

Google ブラウザーの場合:

IE6 ブラウザーの場合:

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

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

HTMLコード:

       
  
header
   

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

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

IE6 ブラウザの表示効果:

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

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

HTML コード:

      
  
header
     

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

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

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