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

Home

Web Front-end

HTML Tutorial

Several methods to solve the problem that compatibility with IE6\7\8 does not support html5 tags

不言

May 08, 2018 pm 03:28 PM

html5ienot support

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>

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

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

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}

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>

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>

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

再看一遍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能获取到，所以这种方法同样不是一个可取的方法！

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

See all articles