HTML5 の新しい要素を古いブラウザと互換性を持たせる方法_html5 チュートリアルのヒント

先生が私たちに尋ねた質問は、「IE8 をこれらのタグと互換性を持たせるにはどうすればよいですか?」です。 (JS で DOM を設計する必要があります)

今日話した内容ですが、理解する必要があります。

コードをコピー

コードは次のとおりです:

🎜>

ナビゲーションエリア

記事エリア
;/html>

は次のように表示されます:

|---------- ------------ --------Firefox---------------------- -------- ----------|

|トップエリア| ​​

| 🎜>
|------------------------------------- ------- ------------------------------------------- --|

古いブラウザの表示スタイルは次のとおりです:

------------------------------------- -----IE6 ブラウザ-- ------------------------------------------- --


---------------------------------IE8 ブラウザ------ ----- ----------------------------------------


私の考えが間違っていなければ、古いブラウザはこれらの新しく追加されたタグを認識しないため、インライン要素を使用してそれらを処理するため、解決策の1つはそれらがタグ内に存在しないようにブロック要素にすることです。同じ行で、古いブラウザと新しいブラウザの両方で同じ効果を表示できるようにします。さらに、新しいタグを追加するための具体的な解決策は、

IE8/IE7/ です。 IE6 は、createElement メソッドによって生成されたタグの場合、この機能を使用してこれらのブラウザーが HTML5 の新しいタグをサポートできるようにすることができます。コードは次のとおりです。 //新しいタグを追加します

JS コードは次のとおりです:



コードをコピー


コード


<script></script>document.createElement('nav');
document.createElement('article); ');

document.createElement('footer');

コードをコピーします


コードは次のとおりです:

var e = "abbr、article、side、audio、canvas、datalist、詳細、ダイアログ、イベントソース、図、フッター、ヘッダー、hgroup、マーク、メニュー、メーター、ナビゲーション、出力、進行状況、セクション、時間、ビデオ".split(', ');
var i= e.length;
while (i--){
document.createElement(e[ i])

}

CSS スタイル設定のデフォルト スタイル:

コードをコピーします


コードは次のとおりです:

記事、脇、キャンバス、詳細、 figcaption、Figure、footer、header、hgroup、menu、nav、section、summary{
display : block;

さらに別の方法フレームワークメソッドを使用し、条件付きコメントと JS コードを使用して

コードをコピー

を実現します。コードは次のとおりです。





このコード行を直接追加することで、互換性の問題を解決できます。

条件 がブラウザのサイズが小さいかどうかを決定するものであることに注意してください。 IE9 以下である場合は、この JS コードを実行します。そうでない場合は、無視してください。 JS のリンクについては、それを開いて見てください。これもコードの大きなセクションです。