ホームページ > 記事 > ウェブフロントエンド > HTML5新タグの互換処理を詳しく紹介（写真）
HTML5新タグの互換処理を詳しく紹介（写真）
- 黄舟オリジナル
- 2017-03-31 13:34:322128ブラウズ
HTML5 新しいセマンティック タグには多くの利点がありますが、低バージョンの古い IE ブラウザ では依然として互換性の問題があり、新しいタグを大胆に使用するべきか、それとも従来のタグを多く使用するべきか、頭を悩ませることがよくあります。 DIVの意味のないタグ？今日は、H5 の新しいタグの互換性について簡単に説明します。
まず簡単なコードの小さな部分を見てください:
HTML コード:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>测试H5新标签兼容性</title>
<style>
header, footer{width:50px; height: 50px; background-color: #f00;}
</style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
</body>
</html>Google ブラウザーの場合:
IE6 ブラウザーの場合:
明らかに、ヘッダーとフッターは H5 の新しいタグをサポートしています。レベル要素はブラウザで表示されますが、IE8 以下のブラウザではテキストとして表示され、スタイルが機能せず、サポートされていないことが示されます。
まず、最初の方法は、DOM操作を使用してこれらのタグを追加することです。ブラウザがサポートしていないため、自分で作成します:
HTMLコード:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>测试H5新标签兼容性</title>
<script>
document.createElement('header');
document.createElement('footer');
</script>
<style>
header, footer{display: block; width:50px; height: 50px; background-color: #f00;}
</style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
</body>
</html>このとき、 IE6 のブラウジングを見てください。 デバイスの表示効果:
赤い背景色が表示されます。これは document.createElement() のメソッドが実行可能であることを示していますが、スタイルの幅と高さが機能しないのはなぜですか?追加された要素はinline要素なので、inline要素には幅も高さもありません。これを理解した上で、ケースのヘッダーとフッターに「display: block;」属性を追加して効果を確認します。変更されます。
<style>
header, footer{display: block;
width:50px; height: 50px;
background-color: #f00;}
</style>IE6 ブラウザの表示効果:
現在の表示効果は、必要なものとまったく同じです。つまり、この方法で古い IE ブラウザの H5 新しいタグの互換性の問題を解決できることになります。しかし、もう一つの疑問は、新しいラベルがたくさんある場合、それぞれをこの方法で作成しなければならない場合、あまりにも面倒ではないでしょうか？
そこで、ここでは 2 番目の方法を紹介します。ダニエル先輩によってパッケージ化された js ライブラリを直接借用します --- html5shiv.js
HTML コード:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>测试H5新标签兼容性</title>
<script src="js/html5shiv.js"></script>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$('#header').css('color','#f00');
$('#footer').css({'width':'100px','height':'100px',
'border':'1px solid #ddd',
'backgroundColor':'#f00'});
$('#header').html('我是一只小小鸟');
</script>
</body>
</html>次に、IE6 ブラウザを直接開いて効果を確認します:
望む効果を完全に実現でき、操作はより簡単で、コードの量も少なくなります。IE7 および IE8 ブラウザーでテストすることもできます。
以上がHTML5新タグの互換処理を詳しく紹介（写真）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。