几个解决方案兼容IE6\7\8不支持html几种标签方法
html五大流行时代已经到来。如果你还在等待浏览器兼容,说明你已经和浏览器兼容了web几条街脱节了。当然,这是由于移动客户端的蓬勃发展。如果还在纠结,应该掌握吗?html5和css3技术的时候,请用力抽几口,然后努力学习!因为前端的春天已经到来,而且不止一个春天。如果你不相信,我只能说:你相信吗!
让我们来看看一个标准。html5标签结构:(我这里只说标签,其他都不涉及)
复制代码代码如下:
html5html当然,标签的进步在于它的语义化。当然,这只是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
复制代码代码如下:
;html5html5\: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实现高亮表格的方法