关于IE8 CSS Hack

文章目录

这次的一个项目中，在一开始承诺了客户会处理掉IE8以上IE浏览器的问题，于是走上了不归路……

这次的问题主要有两个：

1、中部产品展示图片在IE8中不显示；

2、新闻Accordion内容错位。

其实这两个问题都很好解决：

1、随便google一下，就知道是 max-width:100% 造成的，改成 max-width:none 即可；

2、在不同的分辨率下（使用@media），写入分别适应不同的css样式即可。

既然说起来这么简单，为嘛我还要说是不归路呢？不就是因为要针对IE8的唯一CSS Hack么……不能影响其它浏览器……

算起来，我总共绕了三圈：

1、尝试在css里直接hack，这样的话，基本不会增加加载量，也不会影响运行效率。度娘谷哥了一下，的确有效的有这些：

div {

background-color:red\0;  /* ie 8/9/10*/

background-color:blue9\0;  /* ie 9*/

*background-color:green;  /* ie 7*/

_background-color:gray;  /* ie 6*/

}

注意写csshack的顺序，其中：

1.background-color:red\0;IE8和IE9都支持；
2.background-color:blue9\0; 仅IE9支持；

(1)区别FF(IE8)与IE6 IE7

backgorund:orange; FF和IE8背景色将为橘黄色

*backgorund:red;   IE6和IE7背景色将为红色

(2)区别FF(IE8)与IE6与IE7

background:orange;   FF和IE8背景色将为橘黄色

*background:red !important;  IE7背景色将为红色

*background:blue;     IE6背景色将为蓝色

(3)区别FF(IE8)与IE6与IE7

background:orange;        FF和IE8背景色将为橘黄色

*background:red;          IE7背景色将为红色

_background:blue;         IE6背景色将为蓝色

(4)区别FF与IE6 IE7 IE8 IE9

color:gray;       FF等非IE浏览器字体色将为灰色

color:red9;     IE8 IE9字体色将为红色

*color:green;     IE7字体色将为绿色

_color:blue;     IE6字体色将为蓝色

但是为什么我最终放弃了呢？因为这个在比较简洁清晰的css里还比较好。但是这个项目运用了框架和各种js，css被修改的几率大大增加，导致追踪问题的复杂程度也加大。

说简单点，其直接后果就是IE8的问题解决了，同时又带来了IE9、10、11的问题，分别hack的时候，发现还有更多问题要解决。

记得以前余叔说过，如果一个解决办法在解决这个问题的同时还会带来新的问题，那这就不叫解决办法。

2、直接用JS写CSS样式，这样相比前一个方式会增加加载量和渲染时间，但是只要能解决就好。

这样的话，主要是使用的方法来判断浏览器类型，然后执行jQuery的CSS方法。

比如这样：

<!--[if IE 8]>
<script>
    $('#target').css({
      'width':auto;
      'max-width':none;
    })
</script>
<![endif]-->

这个方法为什么也被抛弃了呢？说来也怪，明明跟之前CSS一样，但是居然不起作用。第一个方法折腾了太久，这个方法就懒得debug了，直接用最简单粗暴的方法解决好了。

3、最后用了最笨的方式，也是最耗费加载时间和效率的方式，但是也是最安全最不影响其它部分的方式。即是使用的方法来判断浏览器类型，来加载css文件，而这个css文件里只写入针对IE8的样式修正。

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css">
<![endif]-->

好了，一切问题都解决了。