文章目录

这次的一个项目中,在一开始承诺了客户会处理掉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
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
<!--[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]-->

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


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

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

♦ 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

♦ 原创不易,如果页面上有适合你的广告,不妨点击一下看看,支持作者。(广告来源:Google Adsense)

♦ 本文总阅读量