转: 让html5标签在ie8及以下的被正确解析的解决方案
2014-04-18 10:57
405 查看
最近仿的几个主题中,有几个是采用html5语法制作的,html5嘛,以后必然大势所趋,但是现有的很多浏览器并不支持这种新的标准。
而我制作网站习惯用的是chrome浏览器的,当然不存在不兼容问题了。
等主题做完上线后,经ie8以下浏览器测试,页面惨不忍睹,我在ie10的ie8模式下查看了ie7解析html的语法全部乱了,比如
他在ie8以下解析成了
注意下其中的/符号,整个框架在ie8以下全部被无视掉了,且其他的语法 如<aside></aside>
;<header><header/>;等等都解析错误
这个后果就造成了针对footer,header,aside等的css全部失效,后果可想而知吧。
或许是我对html5这种语法还很陌生吧,网上百度了下居然没找到解决方法,然后就在几个交流群中咨询了下,但是无功而返,但是群友提醒了一句是不是meta信息问题,我也尝试了下,还是不行,然后我只能对比其他的HTML5站点是怎么实现解析的,最终在源码中发现他们在里面加了一句js,使得低版本的浏览器也能正常解析。纠结。。。下面就是对应的js代码了。
或者用下面这句也可以
或者用Google的html5兼容性js也行(ps:国内部分地区被墙,最好下载到本地后加载)
然后把你用到的标签加进去吧,这样就能正常解析了。
而我制作网站习惯用的是chrome浏览器的,当然不存在不兼容问题了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--<script type="text/javascript"> document.createElement('header'); document.createElement('nav'); document.createElement('figcaption'); document.createElement('figure'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); //注意是在header里面引入或写兼容js, 在页面底部无效。这样创建对应标签 经测试ie8能正常识别标签,但标签都变成行内元素, //还是google的html5.js这个增强脚本好,能让标签表现为正常的块级或行内元素。 </script>--> <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> </head> <body> <header> it is header content </header> <footer> it is footer content</footer> </body> </html>
等主题做完上线后,经ie8以下浏览器测试,页面惨不忍睹,我在ie10的ie8模式下查看了ie7解析html的语法全部乱了,比如
<footer>这里是footer部分</footer>
他在ie8以下解析成了
<footer/>这里是footer部分</footer/>
注意下其中的/符号,整个框架在ie8以下全部被无视掉了,且其他的语法 如<aside></aside>
;<header><header/>;等等都解析错误
这个后果就造成了针对footer,header,aside等的css全部失效,后果可想而知吧。
或许是我对html5这种语法还很陌生吧,网上百度了下居然没找到解决方法,然后就在几个交流群中咨询了下,但是无功而返,但是群友提醒了一句是不是meta信息问题,我也尝试了下,还是不行,然后我只能对比其他的HTML5站点是怎么实现解析的,最终在源码中发现他们在里面加了一句js,使得低版本的浏览器也能正常解析。纠结。。。下面就是对应的js代码了。
<script type="text/javascript">document.createElement('header'); document.createElement('nav'); document.createElement('figcaption'); document.createElement('figure'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer');</script>
或者用下面这句也可以
<script type="text/javascript">(function(){var e="abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i]);}}());</script>
或者用Google的html5兼容性js也行(ps:国内部分地区被墙,最好下载到本地后加载)
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
然后把你用到的标签加进去吧,这样就能正常解析了。
相关文章推荐
- ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)
- ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案
- ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)
- IE8及以下不支持HTML5标签的处理
- ie8及以下无法识别html5新增标签,怎么破?
- IE8及以下版本HTML5 placeholder解决方案
- IE8以下不支持H5新标签的解决方案
- IE(IE6/IE7/IE8)支持HTML5标签
- spring-boot-starter-thymeleaf对没有结束符的HTML5标签解析出错
- IE8可以兼容HTML5的标签
- 让IE9以下的版本兼容HTML5解决方案
- thymeleaf模板对没有结束符的HTML5标签解析出错的解决办法
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- HTML5移动端开发中的Viewport标签及相关CSS用法解析
- DW中出现 "以下翻译器没有被装载,由于错误:xxxx.htm:有不正确的设置信息" 问题的解决方案
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- html5的video标签插入mp4视频放在iis服务器访问无法播放解决方案
- 关于IE7 IE8兼容HTML5和CSS3的一种解决方案
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- Dreamweaver中出现 "以下翻译器没有被装载,由于错误:xxxx.htm:有不正确的设置信息" 问题的解决方案(8,cs3,cs4似乎都会出现改问题)