解决Html5标签兼容性问题的4种方法

前言

相信大家在开发的时候遇见了ie浏览器不兼容html5标签的问题，在此笔者为大家整理了4种比较常用的方法，便于大家使用，如果有什么不对希望大家及时指出。

方法一

通过meta标签改变浏览器内核做兼容

方法二

用CSS hack技术解决浏览器兼容性问题

什么是CSS Hack？

不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack

CSS Hack 形式

CSS Hack大致有3种表现形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

1、属性级Hack：比如IE6能识别下划线"“和星号” * “，IE7能识别星号” * “，但不能识别下划线”"，而firefox两个都不能认识。等等

2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。等等
　　
3、IE条件注释Hack：比如针对所有IE：<!–[if IE]> <![endif]–>，针对IE6及以下版本：<!–[if lt IE 7]> <![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
　　注意书写顺序：一般是将识别能力强的浏览器的CSS写在后面。通常先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的。

注意：css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

方法三

简单粗暴，所有的标签都用div来写。

方法四（推荐）

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]-->