如果你问一个前端工程师世界上最痛苦的事情是什么,十有八九都会回答浏览器差异。由于IE6的异常表现加上国内盗版XP系统的横行再加上XP默认绑定IE6人们一般不会去升级浏览器,导致浏览器的差异始终是前端工程师头疼的事情。
CSS hack由于不同的浏览器, 比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏 览器写不同的CSS code的过程,就叫CSS hack!
先介绍三个符号:“ * ”、“ !important ” 和“ _ ”。
!important可被FireFox和IE7识别,* 可被IE6、IE7识别,IE8和FF不能识别,_ 可被IE6识别,IE7、IE8、FF不能识别,'\9'能被ie识别(ie6、ie7、ie8),'\0' 能被IE8、ie9识别,IE6、IE7不能,'\9\0' 只能被ie9识别。
书写顺序,一般是将识别能力强的浏览器的CSS写在后面。
如要区别IE6、IE7、FF浏览器只需要这样写:
background:orange; *background:green; _background:blue;
书写的顺序是firefox的写在前面,IE7的写在中间,IE6的写在最后面。这样FF下的背景色是橙色,IE7下的背景色是绿色,IE6下的背景色是蓝色。这只是其中一种Hack写法,只要记住这三个符号,基本可以解决所有问题。
兼容IE6/IE7/IE8/FF的写法,注意下面的顺序不可颠倒:
border:2px solid #00f; //蓝色
border:2px solid #0f0\9; //绿色
border:2px solid #f90\0; //橙色
_border:2px solid #f00; //红色
FF下蓝边,IE6下红边,IE7下绿边,IE8下橙边。
IE专用的条件注释
(lte:就是Less than or equal to的简写,也就是小于或等于的意思。lt :就是Less than的简写,也就是小于的意思。gte:就是Greater than or equal to的简写,也就是大于或等于的意思。gt :就是Greater than的简写,也就是大于的意思。! :就是不等于的意思,跟javascript里的不等于判断符相同)
例如下面