コメント:この記事では、主に、新しいHTML5要素が古いブラウザーとどのように互換性があるかについてのソリューションを紹介します。それを必要とする友達はそれを参照できます。
1つの質問、教師が私たちに投げかけたものは、これらのタグを使用してIE8に互いに互いに互換性を持たせる方法です。 (JSのDOMの設計が必要です)今日は話しましたが、まだ理解する必要があります。
<span> <!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title>古いブラウザの新しいHTML5要素の互換性を比較-HTML5FEEDORM </title>
</head>
<body>
<header>トップエリア</header>
<NAV>ナビゲーションエリア</nav>
<ports>記事領域</article>
<フッター>下領域</footer>
</body>
</html> </span>
HTML5タグをサポートするブラウザでは、次のように表示されます。
|------------------------------------------------------------------------------------------------------------------------------
|トップエリア|
|ナビゲーションエリア|
|記事領域|
| |
|------------------------------------------------------------------------------------------------------------------------------
古いブラウザのディスプレイスタイルは次のとおりです。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -
すべて同じ効果があります。間違っていない場合、古いブラウザはこれらの新しく追加されたタグを認識していないため、インライン要素を使用してすべて解決されます。したがって、ソリューションにブレークスルーがあり、ブロック要素になり、同じラインになりません。このようにして、新しいブラウザと古いブラウザの両方に同じ効果を表示できます。さらに、ブラウザはタグを認識します。新しいタグを追加する必要性の特定のソリューションは、次のとおりです。
IE8/IE7/IE6は、document.createelementメソッドを介して生成されたタグをサポートしています。この機能を使用して、これらのブラウザがHTML5の新しいタグをサポートできるようにすることができます。コードは次のとおりです。
document.createelement( 'new Tag'); //追加して新しいタグを作成します
JSコードは次のとおりです。
<スクリプト>
document.createelement( 'header');
document.createelement( 'nav');
document.createelement( 'article');
document.createelement( 'footer');
</script>
または、ループによって直接タグを作成します。
var e = "abbr、記事、脇、脇、キャンバス、データリスト、ディテール、ダイアログ、イベント、フィギュア、フッター、ヘッダー、hgroup、マーク、メニュー、メーター、ナビゲーション、出力、進行状況、セクション、時間、ビデオ" .split( '、');
var i = e.length;
while(i-){
document.createelement(e [i])
}
CSSスタイル設定デフォルトスタイル:
<style>
記事はさておき、キャンバス、ディテール、フィギュート、フィギュア、フッター、ヘッダー、hgroup、メニュー、nav、セクション、概要{
表示:ブロック;
}
</style>
別の方法は、条件付きコメントとJSコードを使用してそれを実装するフレームワークメソッドを使用することです
<span> <! - [lt ie 9]>
<Script> src = "http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<![endif] - > </span>
条件付きの注意に関して、互換性の問題を達成するためにこのコードを追加するだけです
<! - lt ie9>の場合
IE9よりも少ないかどうかを判断することです。もしそうなら、このJSコードを実行します。そうでない場合は、無視してください。 JSのリンクについては、直接開いてチェックアウトすることで確認できます。また、大きなコードです。