HTML5 の新しい要素を古いブラウザと互換性を持たせる方法_html5 チュートリアルのヒント
html5
先生が私たちに尋ねた質問は、「IE8 をこれらのタグと互換性を持たせるにはどうすればよいですか?」です。 (JS で DOM を設計する必要があります)
今日話した内容ですが、理解する必要があります。
コードをコピー
コードは次のとおりです:;/html>
は次のように表示されます:
|---------- ------------ --------Firefox---------------------- -------- ----------|
| 🎜>
|------------------------------------- ------- ------------------------------------------- --|
古いブラウザの表示スタイルは次のとおりです:
------------------------------------- -----IE6 ブラウザ-- ------------------------------------------- --
---------------------------------IE8 ブラウザ------ ----- ----------------------------------------
私の考えが間違っていなければ、古いブラウザはこれらの新しく追加されたタグを認識しないため、インライン要素を使用してそれらを処理するため、解決策の1つはそれらがタグ内に存在しないようにブロック要素にすることです。同じ行で、古いブラウザと新しいブラウザの両方で同じ効果を表示できるようにします。さらに、新しいタグを追加するための具体的な解決策は、
IE8/IE7/ です。 IE6 は、createElement メソッドによって生成されたタグの場合、この機能を使用してこれらのブラウザーが HTML5 の新しいタグをサポートできるようにすることができます。コードは次のとおりです。 //新しいタグを追加します
JS コードは次のとおりです:


コードをコピー
コード
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])
コードをコピーします
コードは次のとおりです:
記事、脇、キャンバス、詳細、 figcaption、Figure、footer、header、hgroup、menu、nav、section、summary{
display : block;
コードをコピー
を実現します。コードは次のとおりです。
このコード行を直接追加することで、互換性の問題を解決できます。
コードをコピーします
コードは次のとおりです:
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 のリンクについては、それを開いて見てください。これもコードの大きなセクションです。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事
レポ:チームメイトを復活させる方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
2週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
4週間前
By DDD
R.E.P.O.ファイルの保存場所:それはどこにあり、それを保護する方法は?
4週間前
By DDD

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7367
15


Java チュートリアル
1628
14


CakePHP チュートリアル
1354
52


Laravel チュートリアル
1266
25


PHP チュートリアル
1214
29



HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
