当前位置:首页 > 网页设计 >CSS >

关于CSS hack兼容

发布时间:2016-05-17 11:17:54 作者:佚名 阅读:(596)

掌握 CSS Hacks 可以说是前端开发工程师的一个基本技能。随着浏览器版本的遍地开花,我们寻找着尽可能使各种浏览器表现一致的 CSS 写法。当然 CSS Hacks 是最为流行的解决方案。但对于 IE 而言,目前已经有 IE6/IE7/IE8 三个主要版本,不久的将来还会有 IE9 的到来。于此,IE 是个杯具。

当然有很多人歇斯底里地诋毁 IE6,吾爱编程想说的是,一切诋毁 IE6 的言论都是纸老虎。看看 IE6 的历史,它绝不是一个错误的存在。IE7/IE8 这些有严重后遗症的版本才是导致一切杯具的罪魁祸首。下面是各个 IE 版本的 CSS Hacks 写法:

IE6:
_selector{property:value;}
selector{property:value;property:value!important;} //IE6 不支持同一选择符中的 !important

IE7:
+selector{property:value;}

IE8:
selector{property:value\0;}

IE6 & IE7:
*selector{property:value;}

IE6 & IE7 & IE8:
selector{property:value\9;}

可悲的是,IE8 会自作主张的将页面按照 IE7 模式进行渲染。目前针对 IE 多版本兼容的现状,通常会采用设置 X-UA-Compatible HTTP 头的方式开启 IE8 的兼容模式,这样能在一定程度上减少调试 IE 的工作量。代码如下:

<meta http-equiv="X-UA-Compatible" content="IE=7"> //标准 IE7 模式
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> //兼容 IE7 模式

你也可能会碰到另一种情况:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">//标准 IE 模式
IE8 在没有申明 IE=Edge 的情况下还是会存在以兼容模式渲染的情况,这种设置方案 (IE=Edge) 目前口碑网正在应用。

关于 IE=Edge 详细参考:http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2008-January/013635.html

1. * 符号

IE 浏览器能识别 * 符号,但其他浏览器诸如 Firefox、Opera、Chrome 等不能识别 * 符号。

例:在 Firefox 和 IE 中呈现不同的文字颜色:

color:red;*color:blue;
//在 Firefox 等非 IE 核心浏览器中,文字呈现红色;而 IE 中呈现蓝色。
2. !important

IE7 不但能识别 * 符号,还能识别 !important,而 IE6 只能识别前者。

例:在 IE6 和 IE7 中呈现不同的文字颜色:

color:red !important;color:blue;
//在 IE7 浏览器中,文字呈现红色;而 IE6 中呈现蓝色。
综合 1 和 2,利用上述浏览器特性,可在 CSS 中判别 Firefox,IE7,IE6 并加载不同样式。

例:在 Firefox,IE7,IE6 中呈现三种不同文字颜色:

color:blue;*color:red !important;*color:green;
//在 Firefox 中,文字呈现蓝色,在 IE7 浏览器中,呈现红色;而 IE6 中呈现蓝色。
4. *html 和 *+html

IE 核心的浏览器能识别*html 和*+html,而 Firefox 等非 IE 核心浏览器不能识别。

例:在 Firefox,IE7,IE6 中呈现三种不同文字颜色:

#div {color:red;}
*html #div {color:green;}
*+html #div{color:blue;}
//第一句 Firefox 等可以正常识别,所以这些浏览器中文字呈红色;
//第二句 IE6 能识别并执行,用于针对 IE6 独立写的样式,文字绿色;
//第三句只有 IE7 才能正确识别,而 IE6 和其他非 IE 核心浏览器不能,文字呈蓝色。

欢迎分享转载→ 关于CSS hack兼容

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们