资讯详情

HTML_几个解决兼容IE6\7\8不支持html5标签的几个方法,html5大行其道的时代已经到来 - phpStudy

几个解决方案兼容IE6\7\8不支持html几种标签方法

html五大流行时代已经到来。如果你还在等待浏览器兼容,说明你已经和浏览器兼容了web几条街脱节了。当然,这是由于移动客户端的蓬勃发展。如果还在纠结,应该掌握吗?html5和css3技术的时候,请用力抽几口,然后努力学习!因为前端的春天已经到来,而且不止一个春天。如果你不相信,我只能说:你相信吗!

让我们来看看一个标准。html5标签结构:(我这里只说标签,其他都不涉及)

复制代码代码如下:

html5

html当然,标签的进步在于它的语义化。当然,这只是html5.有人建议进步的九牛之一:不要说html5.进步是革命性的,但发展性的!我不反对这种说法,但在某些方面确实是革命性的。我不想在这里跑题。我们只谈标签。

当然,当你对如此美妙的语义标签感到兴奋时,你不仅要问:IE支持吗?不幸的是,答案是否定的。如果你已经被拒绝了。IE害怕,你必须继续忍受它无尽的折磨。(IE9和IE10与支持兼容html5和css3.0)

但你很高兴你生活在这个时代有很多天才。有人帮你解决了这个问题!虽然,它不能被称为完美

让我们来看看一些兼容的解决方案IE6\7\8不支持html标签的几种方法:

1、javascript: document.createElenment("...")IE6\7\8不支持的部分原因是他们不认为footer是有效的html标签。所以我们不能把它制造成一个标签吗?当然,最直接的方法是,javascript 创建方式:document.createElenment("...")!

复制代码代码如下:

(function(){

var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'],

len=element.length;

while(len--){

document.createElement(element[i])

}

})();

这只是简单地创建几个典型的例子html让它们在标签上IE6\7\8可以成为标签。

有些人已经写了一个完整的js你只需要介绍文件,就像这样:

也有写作

html5shiv和html5shim的区别只有"m"和"v",没有别的区别!当然,这不是我说的。原文是:...the only difference is that "one has an m and one has a v - that's it."

这里有一个特别的说明:IE独特的注释判断:

lte:就是Less than or equal to简写意味着小于或等于。

lt :就是Less than简写,味着小于。

gte:就是Greater than or equal to简写意味着大于或等于。

gt :就是Greater than简写意味着大于。

! : 意思不等于,跟着javascript不等于判断符相同

因为IE9虽然支持html5标签,但支持不完整,所以也可以写"lte",这取决于你的选择!

当然,别忘了指定新标签display在大多数情况下,我希望标签是block的:

复制代码代码如下:

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

2、嵌套标签的方法

其实说白了就是语义化。html5标签内嵌套div等待可用标签,然后只给它div我不赞成写作风格。最好给标签一个语义化的标签。id或者class!

复制代码代码如下:

section .section { color: #f00;

}

内容测试...

但如果类似于这样的结构,使用也没有防御:

复制代码代码如下:

3、IE条件注释

复制代码代码如下:

...

再看一遍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原来的命名空间,到了html后来简化了,。

来自Elco Klingen一开始,日志的方法引起了广泛的关注。该技术包括一个XML以命名空间的形式使用namespace前缀元素,如:

复制代码代码如下:

:html5这个前缀不是标准的写法,也可以用其他字符代替:hl5也可以。有了前缀,IE它可以识别新元素并应用样式。它在其他浏览器中同样有效,所以最终,您成功地在每个浏览器中构建了相同的元素和样式。

这个方法很明显有个缺陷:你必须在HTML文档中使用XML格式命名空间,同样,你也需要css中这么做:

复制代码代码如下:

html5\:section {

display: block;

}

那么对js兼容性如何?以下是测试。deml

复制代码代码如下:

;html5

html5\:section { display: block; width:100px; height:50px; background:#f00; border: 1px solid blue; color: #ff0; }

window.onload = function(){

alert(document.getElementById("test").innerHTML "---id")

alert(document.getElementsByTagName("section")[0].innerHTML "---TagName")

alert(document.getElementsByTagName("SECTION")[0].innerHTML "---大写")

}

内容

测试结果,IE6\7\8均试验通过,但是fixfox和chrome里只有id可以获得,所以这种方法也不是可取的方法!相关阅读:

php无限遍历目录示例

HTML中使用SVG与SVG形状元素介绍的预定义

Win8.1升级Win10用户:开始屏幕设计不进反退

简单实现轮播的方法

MySQL高可用MMM方案安装部署共享

苹果Mac系统么安装Windows10?

Windows 10开始菜单变更清单 升级经典功能

Win如何更新无线网卡驱动系统? Win8系统更新无线网卡驱动方法图

php的SimpleXML方法读写XML接口文件实例分析

JavaScript判断整字类型最简单的实现方法

最精简的JavaScript实现鼠标拖动效果的方法

Win如何安装101周年?Win101周年更新正式版安装图文方法

WordPress开发中短代码的实现及相关函数的使用技巧

JS CSS实现高亮表格的方法

标签: elco光电传感器op18

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台