日期:2014-05-17  浏览次数:20629 次

CSS Hack技巧

兼容各类浏览器的CSS Hack技巧

?

由于不同的浏览器,比如IE6、IE7、IE8、Firefox等对CSS的解析不一样,因此会导致生成的页面效果不一致,得不到我们所需要的页面 效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不 同的浏览器写不同的CSS code的过程,就叫CSS hack。

1.区别IE6与Firefox

程序代码 程序代码
background:orange;
*background:blue;


2.区别IE6与IE7

程序代码 程序代码
background:green !important;
background:blue;


3.区别IE7与Firefox

程序代码 程序代码
background:orange;
*background:green;


4.区别Firefox、IE7、IE6

程序代码 程序代码
background:orange;
*background:green !important;
*background:blue;


5.分别针对Firefox、IE8、IE7和IE6显示值

程序代码 程序代码
selector{??
property:value; /* 所有浏览器 */??
property:value\9; /* 所有IE浏览器 */??
+property:value; /* IE7 */??
_property:value; /* IE6 */??
}


IE都能识别*,标准浏览器(如FF)不能识别*
IE6能识别*,但不能识别!important
IE7能识别*,也能识别!important
FF不能识别*,但能识别!important

于是大家还可以这样来区分IE6,IE7,Firefox :

程序代码 程序代码
background:orange;
*background:green;
_background:blue;


不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

以下两种方法几乎能解决现今所有HACK

1 -?? !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

程序代码 程序代码
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}


2 - IE6/IE77对FireFox

*+html *html 是IE特有的标签,Firefox 暂不支持。而*+html 又为 IE7特有标签。

注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:

程序代码 程序代码
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"


其他兼容技巧

1 - Firefox下给 DIV 设置 padding 后会导致 widthheight 增加,但IE不会(可用!important解决)。

2 - 居中问