文章目录

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

这次的问题主要有两个:

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

2、新闻Accordion内容错位。

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

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

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

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

算起来,我总共绕了三圈:

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

1
2
3
4
5
6
7
8
9
10
11
12
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方法。

比如这样:

1
2
3
4
5
6
7
8
9
<!--[if IE 8]>
<script>
$('#target').css({
'width':auto;
'max-width':none;
})
</script>
<![endif]-->

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

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

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

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

♦ 本文固定连接:http://gsgundam.com/2014-06-30-ie8-css-hack/

♦ 转载请注明:GSGundam 2014年06月30日发布于 GSGUNDAM砍柴工