Mehrere Methoden zur Lösung des Problems, dass kompatibler IE6\7\8 keine HTML5-Tags unterstützt-HTML-Tutorial-php.cn

In diesem Artikel werden hauptsächlich verschiedene Methoden zur Lösung des Kompatibilitätsproblems mit IE678 vorgestellt, das keine HTML5-Tags unterstützt. Jetzt kann ich es mit allen teilen, die es brauchen.

HTML5 ist sehr beliebt. Wenn Sie immer noch nicht wissen, ob Sie HTML5- und CSS3-Technologien beherrschen sollen, geben Sie sich bitte ein paar Ohrfeigen und lernen Sie dann fleißig! Schauen wir uns einige Methoden an, um das Problem der Kompatibilität mit IE678 zu lösen, der keine HTML5-Tags unterstützt. Die Ära der Popularität von HTML5 ist angebrochen. Wenn Sie immer noch auf die Browserkompatibilität warten, bedeutet das, dass Sie bereits keinen Kontakt mehr zum Internet haben. Dies ist natürlich auf die boomende Entwicklung mobiler Clients zurückzuführen. Wenn Sie sich immer noch fragen, ob Sie die HTML5- und CSS3-Technologien beherrschen sollten, schlagen Sie sich bitte ein paar Mal auf den Mund und lernen Sie dann fleißig! Weil die Feder des Vorderteils angekommen ist und es mehr als eine Feder gibt. Wenn Sie es nicht glauben, kann ich nur sagen: Ob Sie es glauben oder nicht!
Sehen wir uns eine Standard-HTML5-Tag-Struktur an: (Ich spreche hier nur von Tags, sonst geht es nicht)

Code kopieren

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Der Fortschritt von HTML5-Tags besteht natürlich darin, dass seine Semantik intuitiver ist. Natürlich ist dies nur ein Tropfen auf den heißen Stein des Fortschritts von HTML5. Einige Leute schlagen vor: Sagen Sie nicht, dass der Fortschritt von HTML5 revolutionär ist, sondern entwicklungspolitisch! Ich widerspreche dieser Aussage nicht, aber sie ist in mancher Hinsicht tatsächlich revolutionär. Ich möchte hier nicht vom Thema abweichen, reden wir einfach über Etiketten.

Wenn Sie von so wunderbaren semantischen Tags begeistert sind, müssen Sie sich natürlich immer noch fragen: Unterstützt der IE das? Leider lautet die Antwort nein. Wenn Sie bereits Angst vor dem IE haben, müssen Sie weiterhin seine endlosen Qualen ertragen. (IE9 und IE10 sind bereits mit HTML5 und CSS3.0 kompatibel)
Aber Sie müssen Glück haben, in der Zeit, in der Sie leben, gibt es viele Genies. Jemand hat dieses Problem bereits für Sie gelöst! Allerdings kann man es nicht als perfekt bezeichnen!
Sehen wir uns einige Methoden an, um das Problem der Kompatibilität mit IE678 zu lösen, der keine HTML5-Tags unterstützt:
1. javascript: document.createElenment("...")
Ein Grund, warum IE678 dies nicht unterstützt, liegt darin, dass die Fußzeile nicht als gültiges HTML-Tag betrachtet wird. Würde es also nicht reichen, wenn wir daraus ein Label „machen“? Der direkteste Weg ist natürlich, es mit Javascript zu erstellen: document.createElenment("...")

Code kopieren

Der Code lautet wie folgt:

(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]) 
} 
})();

Nach dem Login kopieren

Dadurch werden einfach ein paar typische HTML5-Tags erstellt, damit diese zu Tags im IE678 werden können.
Jemand hat bereits eine vollständige js-Datei geschrieben, Sie müssen sie nur importieren, etwa so:

<!--[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."

Nach dem Login kopieren

Hier sollte eine besondere Anmerkung gemacht werden: Es handelt sich um das einzigartige Kommentarurteil des IE:
lte: Dies ist die Abkürzung für „Less than or equal to“, was „kleiner als oder gleich“ bedeutet.
lt: Es ist die Abkürzung für Less than, was weniger als bedeutet.
gte: Dies ist die Abkürzung für „Größer als oder gleich“, was „größer als oder gleich“ bedeutet.
gt: Es ist die Abkürzung für Greater than, was größer als bedeutet.
!: Es bedeutet nicht gleich, was dasselbe ist wie das ungleiche Beurteilungszeichen in Javascript.
Denn obwohl IE9 HTML5-Tags unterstützt, ist die Unterstützung nicht vollständig, sodass Sie auch „lte“ schreiben können, es kommt darauf an Auf deine Wahl!
Vergessen Sie natürlich nicht, das Anzeigeattribut des neuen Etiketts anzugeben. In den meisten Fällen möchte ich, dass das Etikett blockiert ist:

Code kopieren

Der Code lautet wie folgt:

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

Nach dem Login kopieren

2. Die Methode zum Verschachteln von Tags
Tatsächlich ist es das, um es klar auszudrücken p und andere verfügbare Tags in semantischen HTML5-Tags zu verschachteln, und dann bin ich nicht damit einverstanden, Stile nur für p zu schreiben. Es ist besser, dem Tag eine semantische ID oder Klasse zu geben!

Kopieren Sie den Code

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Aber wenn es so eine Struktur hat, ist es nutzlos:

Code kopieren

Der Code lautet wie folgt:

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

Nach dem Login kopieren

3. IE-bedingte Kommentare

Code kopieren

Der Code lautet wie folgt:

<!--[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]-->

Nach dem Login kopieren

再看一遍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>

Nach dem Login kopieren

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

复制代码

代码如下:

html5\:section { display: block; }

Nach dem Login kopieren

那么对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>

Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonMehrere Methoden zur Lösung des Problems, dass kompatibler IE6\7\8 keine HTML5-Tags unterstützt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!