Several methods to solve the problem that compatibility with IE6\7\8 does not support html5 tags-HTML Tutorial-php.cn

This article mainly introduces several methods to solve the problem of compatibility with IE6\7\8 that does not support html5 tags. It has certain reference value. Now it is shared with everyone. Friends in need can refer to it

html5 The era of popularity has arrived. If you are still struggling with whether you should master html5 and css3 technologies, please slap yourself in the mouth a few times, and then study hard! Let’s take a look at a few methods to solve the problem of compatibility with IE6\7\8 that does not support html5 tags. The era of html5 becoming popular has arrived. If you are still waiting for browser compatibility, it means you are already out of touch with the web. Of course, this is due to the booming development of mobile clients. If you are still wondering whether you should master HTML5 and CSS3 technologies, please slap yourself in the mouth a few times, and then study hard! Because the spring of the front end has arrived, and there is more than one spring. If you don’t believe it, I can only say: Believe it or not!
Let’s take a look at a standard html5 tag structure: (I’m just talking about tags here, nothing else is involved)

Copy code

The code is as follows:

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

Copy after login

The progress of the html5 tag is of course that its semantics are more intuitive. Of course, this is just a drop in the bucket of the progress of html5. Some people suggest: Don’t say that the progress of html5 is revolutionary, but developmental! I don't disagree with this statement, but it is indeed revolutionary in some respects. I don’t want to go off topic here, let’s just talk about labels.

Of course, when you are excited about such wonderful semantic tags, you still have to ask: Does IE support it? Unfortunately, the answer is no. If you are already scared of IE, you will have to continue to endure its endless torture. (IE9 and IE10 are already compatible with html5 and css3.0)
But you have to be lucky, there are many geniuses in the era you live in. Someone has already solved this problem for you! Although, it cannot be called perfect!
Let’s look at a few methods to solve the problem of compatible IE6\7\8 not supporting html5 tags:
1. javascript: document.createElenment("...")
Part of the reason why IE6\7\8 does not support it is that they do not consider footer to be a valid html tag. So wouldn’t it be enough if we “make” it into a label? The most direct way is, of course, to create it using javascript: document.createElenment("...")!

Copy code

The code is as follows:

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

Copy after login

This simply creates a few typical html5 tags so that they can become tags in IE6\7\8.
Someone has already written a complete js file, you only need to import it, like this:

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

Copy after login

A special note should be made here: it is IE’s unique comment judgment:
lte: It is the abbreviation of Less than or equal to, which means less than or equal to.
lt: It is the abbreviation of Less than, which means less than.
gte: It is the abbreviation of Greater than or equal to, which means greater than or equal to.
gt: It is the abbreviation of Greater than, which means greater than.
!: It means not equal to, which is the same as the not equal to judgment character in JavaScript
Because although IE9 supports html5 tags, the support is not complete, so you can also write "lte", it depends on you s Choice!
Of course, don’t forget to specify the display attribute of the new label. In most cases, I hope that the label is block:

##Copy code

The code is as follows:

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

Copy after login

2. Method of nesting tags In fact, to put it bluntly, it is to nest p and other available tags within semantic html5 tags, and then I don't agree with writing styles only for p. It would be better to give the tag a semantic id or class!

Copy code

The code is as follows:

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

Copy after login

But if it has a structure similar to this, it will be useless:

Copy code

The code is as follows:

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

Copy after login

3. IE conditional comments

##Copy codecode show as below:

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

Copy after login

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

Copy after login

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

复制代码

代码如下:

html5\:section { display: block; }

Copy after login

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

Copy after login

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

The above is the detailed content of Several methods to solve the problem that compatibility with IE6\7\8 does not support html5 tags. For more information, please follow other related articles on the PHP Chinese website!