HTML5ブラウザ互換性ソリューションの詳しい説明-H5 チュートリアル-php.cn

下位バージョンのブラウザは HTML5 をサポートしています

HTML5 要素をブロック要素として定義する

HTML に新しい要素を追加します

Internet Explorerブラウザの問題

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5ブラウザ互換性ソリューションの詳しい説明

黄舟

Mar 16, 2017 pm 04:19 PM

現在、ほとんどのブラウザは HTML5 をサポートしています。ただし、一部の下位バージョンのブラウザでは、HTML5 サポートにいくつかの問題があります。

下位バージョンのブラウザは HTML5 をサポートしています

すべてのブラウザで、認識できない要素は自動的にインライン要素として処理されます。したがって、次のメソッドを使用して、ブラウザに「不明な」HTML 要素を処理するように教えることができます。

HTML5 要素をブロック要素として定義する

HTML5 では、8 つの新しい HTML セマンティック要素が定義されています。これらの要素はすべてブロックレベルの要素です。
古いバージョンのブラウザでこれらの要素を正しく表示できるようにするには、CSS の display プロパティをブロックするように設定できます:

header, section, footer, aside, nav, main, article, figure {    display: block; 
}

ログイン後にコピー

HTML に新しい要素を追加します

次の例では、HTML に新しい要素を追加します。要素のスタイルを定義します。要素名は <myElement>:

<!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 リソースです。

IEブラウザの場合html5shivはより良いソリューションです。 html5shiv は主に、HTML5 で提案された新しい要素が IE6-8 で認識されず、子要素をラップする親ノードとして使用できず、CSS スタイルを適用できないという問題を解決します。

以下は 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。