css hack简易的“独享”与“交集”
作者:ICO 来源:混乱八小时 时间:2008-08-31 20:17:00
最近正在做首页,处理很棘手的浏览器兼容的问题,主要调试的浏览器为 IE6 ,IE7 ,FF3 ,Opera9.5 ,Safari3.1.2
兼容浏览器是一种很费神的工作,和前期的页面设计也是很有关系的。如何合理设计出易制作,易维护,易扩展的页面可是非常具有水准的工作,这个可是我的努力目标,当然除了个人努力之外,还有点很直接的关系就是BOSS们是否肯花时间让你去分析目前网站的架构和布局,好了,话不多说了,应该谈谈我这些日子碰到的兼容性问题了。
我制作页面完成之后,首先的工作一定会是去检验下页面是否通过 w3c 和 css 的2个标准,当然,并不是说,一定要通过这个标准,其实去检测页面的目的应该是看一下自己写的页面,是否合理?是否有一些不合标准的标签的运用,这个对之后进行的工作有很大的帮助。
其次就是关于浏览器的兼容性问题了,关于这个什么浏览器为什么不能兼容我就不多提了,我就罗列一下,我常用的css hack吧,不考虑ie6以下版本了。。
各大浏览器独享hack
ie6: “_“下划线是它的独享,例如: _background-color:#000;
ie7: “+!important” 复杂了点,但是为了效果… ,例如: + background-color:#000 !important;
FF: “!important“,他和ie7有很多类似,如果想要区分开ie和FF,只要把FF的代码写在ie的前面即可(下面会写到) ,例如: background-color:#000 !important;
各大浏览器交集hack
以下段落出自CSS hack:区分IE6,IE7,firefox
区别不同浏览器,CSS hack写法:
区别IE6与FF:
background:orange; *background:blue;区别IE6与IE7:
background:green !important; background:blue;区别IE7与FF:
background:orange; *background:green;区别FF,IE7,IE6:
background:orange; *background:green !important; *background:blue;注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6 IE7 FF * √ √ × !important × √ √
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!importantIE6支持下划线,IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6,IE7,firefox
background:orange;*background:green;_background:blue;这个很重要:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。