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

How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

HTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AM

The core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.

Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

See all articles