IE浏览器兼容问题的几点写法分享

HACK就是针对不同的浏览器写不同的HTML、CSS样式，从而使各种浏览器达到一致的渲染效果。

下面我们就分别了解一下HTML的hack和CSS的hack。

（一）、HTML的hack

HTML的hack由注释<!-- -->演变而来，在高级浏览器中注释不会被加载，把IE浏览器的兼容代码写在注释中，IE浏览器会识别。

HTML的hack代码模板：

注：

①用于写兼容的注释，标签内首位都要加！感叹号。

②单词都写在一对中括号中

③IE和版本号之间要加空格

④不加比较单词，表示只兼容这一个版本；

比较单词：lt=less than(小于)、lte=less than or equal (小于等于)、gt=great than(大于)、gte=great than or equal(大于等于)

<!--[if IE ６]><ｐ>只有IE6认识我<／p><![endif]-->

只要记住这一个模板就知道HTML的兼容怎么写了，下面我们列举几个：

<!--[if gte IE 9]>
       <h1>大于等于IE9的浏览器能看到</h1>
<![endif]-->

<!--[if lte IE 8]>
       <h1 class="red">您的浏览器版本过低，IE8及以下版本不支持新样式，请更新浏览器</h1>
<![endif]-->

单独写给IE6的解决兼容问题的HTML代码：<!--[if IE 6]>
     <script src="js/iepng.js?1.1.11" type="text/javascript"></script>
     <script type="text/javascript">
       EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');
     </script>
<![endif]-->

（二）、CSS的hack

CSS的hack包括：属性的hack和选择器的hack

设置css的hack要注意的是css样式的层叠性，给同一个元素设置的兼容写法必须写在后面，否则会被层叠掉。

（1）属性的hack

①只兼容IE6的hack

hack符：-或_，当做前缀写在属性前面，中间不加空格

在属性名前面加短横-或者下划线_(原理：高级浏览器及其他浏览器会认为这个前缀符号是一个unknown property name)，未知的属性名，不会报错，不予加载。

例：

background:red;    //高级浏览器识别_background:pink;    //仅IE6识别

②兼容IE6、7的hack

hack符： ` ~ ! @ # $ % ^ & * ( ) + = [ ]

关键词：IE浏览器兼容问题的几点写法分享