Plusieurs méthodes pour résoudre le problème selon lequel la compatibilité avec IE6\7\8 ne prend pas en charge les balises html5-tutoriel HTML-php.cn

Cet article présente principalement plusieurs méthodes pour résoudre le problème de compatibilité avec IE678 qui ne prend pas en charge les balises html5. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

. html5 est très populaire. L'ère est arrivée. Si vous ne savez toujours pas si vous devez maîtriser les technologies HTML5 et CSS3, donnez-vous quelques gifles, puis étudiez dur ! Jetons un coup d'œil à quelques méthodes pour résoudre le problème de compatibilité avec IE678 qui ne prend pas en charge les balises html5. L’ère de la popularité du HTML5 est arrivée. Si vous attendez toujours la compatibilité du navigateur, cela signifie que vous êtes déjà déconnecté du Web. Bien entendu, cela est dû au développement fulgurant des clients mobiles. Si vous vous demandez toujours si vous devez maîtriser les technologies HTML5 et CSS3, veuillez vous gifler plusieurs fois, puis étudier dur ! Parce que le ressort de l'avant est arrivé, et il y a plus d'un ressort. Si vous n’y croyez pas, je peux seulement dire : croyez-le ou non !
Jetons un coup d'œil à une structure de balises html5 standard : (je parle juste de balises ici, rien d'autre n'est impliqué)

Copier le code

Le code est le suivant :

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

Copier après la connexion

La progression des balises html5 tient bien sûr à ce que sa sémantique soit plus intuitive. Bien sûr, ce n’est qu’une goutte d’eau dans l’océan des progrès du HTML5. Certaines personnes suggèrent : ne dites pas que les progrès du HTML5 sont révolutionnaires, mais développementaux ! Je ne suis pas en désaccord avec cette affirmation, mais elle est effectivement révolutionnaire à certains égards. Je ne veux pas sortir du sujet ici, parlons juste des étiquettes.

Bien sûr, lorsque vous êtes enthousiasmé par des balises sémantiques aussi merveilleuses, vous devez toujours vous demander : est-ce qu'IE le prend en charge ? Malheureusement, la réponse est non. Si vous avez déjà peur d’IE, vous devrez continuer à endurer sa torture sans fin. (IE9 et IE10 sont déjà compatibles HTML5 et CSS3.0)
Mais il faut avoir de la chance, il y a beaucoup de génies à cette époque dans laquelle vous vivez. Quelqu'un a déjà résolu ce problème pour vous ! Cependant, cela ne peut pas être qualifié de parfait !
Regardons quelques méthodes pour résoudre le problème de compatibilité avec IE678 qui ne prend pas en charge les balises html5 :
1. javascript : document.createElenment("...")
Une partie de la raison pour laquelle IE678 ne le prend pas en charge est qu'ils ne considèrent pas le pied de page comme une balise HTML valide. Alors, ne suffirait-il pas d’en faire un label ? Le moyen le plus direct est bien sûr de le créer en javascript : document.createElenment("...")

Copier le code

Le code est le suivant :

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

Copier après la connexion

Cela crée simplement quelques balises html5 typiques afin qu'elles puissent devenir des balises dans IE678.
Quelqu'un a déjà écrit un fichier js complet, il vous suffit de l'importer, comme ceci :

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

Copier après la connexion

Une note particulière doit être faite ici : c'est le jugement de commentaire unique d'IE :
lte : C'est l'abréviation de Inférieur ou égal à, qui signifie inférieur ou égal à.
lt : C'est l'abréviation de Less than, qui signifie moins que.
gte : C'est l'abréviation de Supérieur ou égal à, qui signifie supérieur ou égal à.
gt : C'est l'abréviation de Greater than, qui signifie supérieur à.
! : Cela signifie pas égal, ce qui est identique au caractère de jugement pas égal en javascript
Parce que bien que IE9 prenne en charge les balises html5, la prise en charge n'est pas complète, vous pouvez donc également écrire "lte", cela dépend. sur votre choix !
Bien sûr, n'oubliez pas de préciser l'attribut display du nouveau label Dans la plupart des cas, je souhaite que le label soit bloqué :

Copier le code<. 🎜>

Le code est le suivant :

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

Copier après la connexion

2. Méthode d'imbrication des balises En fait, pour parler franchement, disponible. des balises telles que p sont imbriquées dans des balises sémantiques html5, puis n'écrivent que des styles pour p. Je ne suis pas d'accord avec cette façon d'écrire. Il est préférable de donner à la balise un identifiant sémantique ou une classe

Copiez le code

Le code est le suivant :

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

Copier après la connexion

Mais s'il a une structure comme celle-ci, ça ne sert à rien :

Copier le code

Le code est le suivant :

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

Copier après la connexion

3. Commentaires conditionnels IE

Copier le code

Le code est le suivant :

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

Copier après la connexion

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

Copier après la connexion

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

复制代码

代码如下:

html5\:section { display: block; }

Copier après la connexion

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

Copier après la connexion

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!