IE6/7/8との互換性がhtml5タグをサポートしていない問題を解決するいくつかの方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

IE6/7/8との互換性がhtml5タグをサポートしていない問題を解決するいくつかの方法

不言

May 08, 2018 pm 03:28 PM

html5ieサポートしません

この記事では、HTML5 タグをサポートしていない互換性のある IE678 の問題を解決するためのいくつかの方法を主に紹介します。必要な友人に参考にしてください。

HTML5 の時代が到来しました。 HTML5 と CSS3 テクノロジーを習得すべきかどうかまだ迷っている場合は、自分の口を数回叩いてから、一生懸命勉強してください。 html5タグをサポートしていないIE678との互換性の問題を解決するためのいくつかの方法を見てみましょう。 html5が普及する時代が到来しました。まだブラウザーの互換性を待っている場合は、すでに Web に慣れていないことを意味します。もちろん、これはモバイルクライアントの開発が急成長しているためです。 HTML5 と CSS3 テクノロジーを習得すべきかどうかまだ迷っている場合は、自分の口を数回叩いてから、一生懸命勉強してください。フロントエンドのスプリングが到着しており、スプリングが複数あるためです。信じられないなら、私は「信じるか信じないか」としか言えません。
標準の html5 タグ構造を見てみましょう: (ここではタグについてだけ話します。他には何も関係しません)

コードをコピーします

コードは次のとおりです:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="gb2312"> 
<title>html5</title> 
</head> 
<body> 
<header> 
<nav></nav> 
</header> 
<article> 
<section> 
<h2></h2> 
<p></p> 
</section> 
</article> 
<footer></footer> 
</body> 
</html>

html5 タグの進歩はもちろん、そのセマンティクスはより直感的になっています。もちろん、これは html5 の進歩のほんの一滴にすぎず、「html5 の進歩は革新的だ、とは言わないでください。発展的なものです。」と言う人もいます。私はこの意見に同意しませんが、ある意味では確かに革命的です。ここでは本題から逸れるつもりはありませんが、ラベルについてだけ話しましょう。

もちろん、このような素晴らしいセマンティックタグに興奮しているときでも、「IE はそれをサポートしていますか?」と尋ねる必要があります。残念ながら、答えはノーです。すでに IE を怖がっている場合は、その終わりのない拷問に耐え続ける必要があります。 (IE9 と IE10 はすでに HTML5 と CSS3.0 と互換性があります)
しかし、あなたは幸運でなければなりません、あなたが住んでいるこの時代には多くの天才がいます。誰かがすでにこの問題を解決しています。とはいえ、完璧とは言えません！
IE678 が HTML5 タグをサポートしていない問題を解決するいくつかの方法を見てみましょう:
1. javascript: document.createElenment("...")
IE678 が HTML5 タグをサポートしない理由の 1 つは次のとおりです。フッターが有効な HTML タグであるとはみなされません。だったらそれをレーベルに「作ってしまえば」いいんじゃないでしょうか？最も直接的な方法は、もちろん、javascript を使用して作成することです: document.createElenment("...")

コードをコピーします

コードは次のとおりです:

(function(){ 
var element=[&#39;header&#39;,&#39;footer&#39;,&#39;article&#39;,&#39;aside&#39;,&#39;section&#39;,&#39;nav&#39;,&#39;menu&#39;,&#39;hgroup&#39;,&#39;details&#39;,&#39;dialog&#39;,&#39;figure&#39;,&#39;figcaption&#39;], 
len=element.length; 
while(len--){ 
document.createElement(element[i]) 
} 
})();

いくつかの一般的な html5 タグを作成するだけで、IE678 でタグにできるようになります。
誰かがすでに完全な js ファイルを書いているので、次のようにインポートするだけです:

<!--[if lt ie 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 也有写作 
<!--[if lte IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
< ![endif]-->html5shiv和html5shim的区别只有"m"和"v"，没有其它区别！当然这不是我说的。原文是:...the only difference is that "one has an m and one has a v - that&#39;s it."

ここでの特別な注意: これは IE 独自のコメント判定です:
lte: Less than orequal to を意味します。略語は Less を意味します。以上。
lt:Less than の略で、未満という意味です。
gte：Greater than orequal toの略で、以上という意味です。
gt: Greater than の略で、「より大きい」という意味です。
!: 等しくないという意味で、JavaScript の等しくない判定文字と同じです。
IE9 は html5 タグをサポートしていますが、サポートが完全ではないため、選択次第で「lte」と書くこともできます。
もちろん、新しいラベルの表示属性を指定することを忘れないでください。ほとんどの場合、ラベルをブロックにします:

コードをコピーします

コードは次のとおりです:

header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}

2. ラベルをネストする方法
実際、単刀直入に言うと、セマンティックなhtml5タグ内にpとその他の利用可能なタグを埋め込んで、pのスタイルのみを記述することになります。。タグにセマンティック ID またはクラスを与える方が良いです

コードをコピーします

コードは次のとおりです:

<!--[if lt IE 9]> 
<style> 
body > * .section { 
color: #ff0; 
} 
</style> 
<![endif]--> 
<style> 
section .section { color: #f00; 
} 
</style> 
<section><p class="section">内容测试...</p></section>

ただし、これに似た構造がある場合は役に立ちません:

コードをコピーします

コードは次のとおりです:

<nav > 
<ul class="test"> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</nav>

3. IEの条件付きコメント

コードをコピーします

コードは次のとおりです。

<!--[if lt IE 9]><p class="section"><![endif]--> 
<!--[if IE 9]><section class="section"><![endif]--> 
<!--[if !IE]><!--><section class="section"><!--<![endif]--> 
...... 
<!--[if lt IE 9]></p><![endif]--> 
<!--[if IE 9]></section><![endif]--> 
<!--[if !IE]><!--></section><!--<![endif]-->

再看一遍IE特有的注释判断：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同
相信大家都明白，这是怎么回事！这是一个更加蛋疼的办法！大量的html代码使原本想语义化的代码更加混乱不堪。而且要对样式的书写也不利。
4、使用xmlns定义文档的命我空间
xmlns即是XHTML namespace的缩写，也就是所谓的“命名空间”。与DOCTYPE声明一样，xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是，在HTML文档是不存在xmlns的，我们平常所见到的xmlns都是出现在XHTML文档中的。
这是xhtml原有的命名空间，到了html5以后被简化了，。
来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素，例如：

复制代码

代码如下:

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"> 
<body> 
<html5:section> 
<!-- content --> 
</html5:section> 
</body> 
</html>

:html5这个前缀并不是一个标准的写法，你也可以用其它字符代替：hl5也是可以的。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。
这个方法很明显有个缺陷：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做:

复制代码

代码如下:

html5\:section { display: block; }

那么对js的兼容性如何呢？下面是个测试deml

复制代码

代码如下:

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"> 
<head> 
<title>;html5</title> 
<meta charset="gb2312"> 
<style> 
html5\:section { display: block; width:100px; height:50px; background:#f00; border: 1px solid blue; color: #ff0; } 
</style> 
<script> 
window.onload = function(){ 
alert(document.getElementById("test").innerHTML + "---id") 
alert(document.getElementsByTagName("section")[0].innerHTML + "---TagName") 
alert(document.getElementsByTagName("SECTION")[0].innerHTML + "---大写") 
} 
</script> 
</head> 
<body> 
<html5:section id="test">内容</html5:section> 
</body> 
</html>

测试结果，IE6\7\8均测试通过，但fixfox和chrome里只有id能获取到，所以这种方法同样不是一个可取的方法！

以上がIE6/7/8との互換性がhtml5タグをサポートしていない問題を解決するいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか？May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists：1）forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2）

HTMLアクション：Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1）Webサイト構造などのタグを使用し、定義します。 2）例は、ブログとeコマースのウェブサイトの構造を示しています。 3）誤ったラベルネスティングなどの一般的な間違いを避けてください。 4）HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか？May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1）usealttextforaccessibilityandseo.2）emplencesrcsetForresponsiveimages.3）applylazyloadingwithloading = "lazy" tooptimizeperformance.4）

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。