&nbs p;
如果我们不做什么手脚的话,IE6~IE8浏览器不支持 HTML 5元素, <nav>, <header>, <footer>, <article> & # 8230;
然而,前篇 GOOGLE 前端规范HT ML 部分中提到:要使用语义的HTML5元素作为text/html, 考虑到Google不可能把IE8等浏览器弃之不顾,因此,肯定是有什么方法可以让IE6~8浏览器也支持HTML5元素的。
熟知的JavaScript方法
如果你对HTML5元素的关注比对红番茄八卦的关注多的话, 应该 都 知道 如何是有 简单 的JavaScript代码让IE6~8浏览器支持HTML5元素,类似下面代码:
(function() { // 页面头部 VAR a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */ ]; for (var i = 0, j = a.length; i i++ ) { document.createElement(a[i]); } })();
您可以狠狠地点击这里:JS让IE支持HTML5元素demo
对比demo页面 源 代码以及实际效果,我们可以发现,简单的一句:
document.createElement("section");
就让 section{} 的相关样式在IE7浏览器下 生效 了!!
提到使用JavaScript, 必定又有一些人拿可用性来叫嚣了:“尼玛,要是用户把JavaScript给禁掉,那不就嗝屁啦!
”
据说因为tw IT ter在JS被禁用的情况下就像中了葵花点穴手——动不了了!而被一些热心人士提意见:应该改进改进啊,可以让在JS禁用的情况下 正常 使用。
理想 是丰满的,实现是荆棘的!讨论要不要在实际项目中支持无JavaScript的正常使用,会让刘先生发话的:“我活了42年,这是我见过的最无聊的问题!”
However, 就像是我们不会亲自实践人工呼吸,但是知道该怎么做还是有必要的。因此,我们知道如何不使用JavaScript让IE浏览器支持HTML5元素也是很有必要的。
*通配符方法
据说是W hat WG组提出的一个方法,如下建议:
知道DOM的体重以及三围,样式应用在其他元素上(非HTML元素) 使用全局选择器,通配符( * )指向正确的目标元素 无脚本应用不过 ,根据我自己的尝试,这个方法让我感到有些莫名其妙:如果样式要应用在内部的其他元素上,尼玛直接在里面元素设置个类名控制不久OK了!!
可能,这种方法适用于类似于:
section p {}
这种含有HTML标记的后代选择器。上面的 CSS 选择器IE6~8是不认识的,WHATWG说的方法是使用:
body > * p {}
对IE7, IE8浏览器进行匹配(IE6不支持,我擦~~
, 但这个FireFox , Ch rom e又都支持)
总之这是一个我看不懂,且 觉得 很蛋疼的不适应中国国情的方法,求高人指点!
您有兴趣可以狠狠地点击这里:*通配符让IE支持HTML5元素demo
为了避免各个浏览器间复杂的多角恋,我不得已使用了条件注释:
<!--[if lt IE 9]> <style> body > * .section { dis play : block; padding: .5em; border-left: 3px solid #ddd; color: #999; } </style> <![endif]--> <style> section .section { display: block; padding: .5em; border-left: 3px solid #ddd; color: #999; } </style>
HTML如下:
<section><div class="section">中国将向非洲 .. .</div></section>
IE6下无效果,IE7下长相如下:
IE条件注释
又是很蛋疼,且个人觉得基本无实用 价值 的方法:
<!--[if lt IE 9]><div class="section"><![endif]--> <!--[if IE 9]><section class="section"><![endif]--> <!--[if !IE]><!--><section class="section"><!--<![endif]--> ...... <!--[if lt IE 9]></div><![endif]--> <!--[if IE 9]></section><![endif]--> <!--[if !IE]><!--></section><!--<![endif]-->
这明眼人一眼就看出 意思 :IE6~8使用传统的 < div > 标签,您对效果有兴趣的话,可以狠狠地点击这里:条件注释让IE支持HTML5元素demo
靠谱方法:使用命名空间
我们需要做的如下:
修改 <html> 标签处的命名空间 使用类似 <html5:section><html5:/section> 标签 使用如下选择器名称进行控制: html5 /:section {}具体操作如下:
<html XM lns="http://www.w3. org /1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml "> <body> <html5:section>...</html5:section> </body> </html>
然后使用:
html5/:section { /* 样式 */ }
您可以狠狠地点击这里:命名空间让IE支持HTML5元素demo
上demo HTML代码为:
<div class="section">所有浏览器:黄忠,绿忠,黑忠,红中</div> <section>不包括IE6-8: 黄忠,绿忠,黑忠,红中</section> <html5:section>包括IE6-8浏览器:黄忠,绿忠,黑忠,红中<html5:/section>
CSS代码为:
.section, section, html5/:section { display: block; padding: .5em; border-left: 3px solid #ddd; color: #999; }
此时,我们在看看IE7浏览器下的效果:
该方法,IE6浏览器也是支持的。看上去使用也蛮清爽的。至少比上面两个方法要靠谱N倍了!
使用的时候注意XHTML需要没有错误,否则站点可能什么都显示不出来。同时,最头部可能要添加 <?xml version="1.0" encoding="utf-8"?> ,据说,否则IE6会采用 严格模式 。
参考 文章 :HTML5 elements in internet E xp lorer without Javascript
(本篇完)
觉得可用,就经常来吧! 欢迎评论哦! html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!
总结
以上是 为你收集整理的 html5教程-不使用JavaScript让IE浏览器支持HTML5元素 全部内容,希望文章能够帮你解决 html5教程-不使用JavaScript让IE浏览器支持HTML5元素 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于html5教程-不使用JavaScript让IE浏览器支持HTML5元素的详细内容...