ホームページ > 記事 > ウェブフロントエンド > HTML5ブラウザ互換性ソリューションの詳しい説明
HTML5ブラウザ互換性ソリューションの詳しい説明
- 黄舟オリジナル
- 2017-03-16 16:19:371999ブラウズ
現在、ほとんどのブラウザは HTML5 をサポートしています。ただし、一部の下位バージョンのブラウザでは、HTML5 サポートにいくつかの問題があります。
下位バージョンのブラウザは HTML5 をサポートしています
すべてのブラウザで、認識できない要素は自動的に インライン要素 として処理されます。したがって、次のメソッドを使用して、ブラウザに「不明な」HTML 要素を処理するように教えることができます。
HTML5 要素をブロック要素として定義する
HTML5 では、8 つの新しい HTML セマンティック要素が定義されています。これらの要素はすべてブロックレベルの要素です。
古いバージョンのブラウザでこれらの要素を正しく表示できるようにするには、CSS の display プロパティをブロックするように設定できます:
header, section, footer, aside, nav, main, article, figure { display: block;
}HTML に新しい要素を追加します
次の例では、HTML に新しい要素を追加します。要素のスタイルを定義します。要素名は 42e526b9ba2ad1676af0e54be02a3dd4:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myElement")</script>
<style>
myElement{
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myElement>我的第一个新元素</myElement>
</body>
</html>document.createElement("myElement") は、IE ブラウザーに新しい要素を追加します。
Internet Explorerブラウザの問題
上記の方法を使用してブラウザに新しい要素を追加できますが、IE8以下のバージョンはこの方法をサポートできません。
この問題を解決するには、Sjoerd Visscher によって作成された「HTML5 有効化 JavaScript」「shiv」を使用できます:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
または
<!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
上記のコードの機能は、IE ブラウザーのバージョンが IE9 より小さい場合に html5 を読み取ることです。 .js ファイルを取得して解析します。前者は国内の Google リソース、後者は国内の Baidu リソースです。
以下は html5shiv ソリューションの使用例です:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>渲染 HTML5</title> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"> </script> <![endif]--></head><body><h1>我的第一个HTML5页面</h1> <article>Hello，world！</article> </body> </html>
以上がHTML5ブラウザ互換性ソリューションの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。