网络编程
位置:首页>> 网络编程>> 网页设计>> css hack简易的“独享”与“交集”

css hack简易的“独享”与“交集”

作者:ICO 来源:混乱八小时 发布时间:2008-08-31 20:17:00 

标签:hack,兼容,浏览器,css

最近正在做首页,处理很棘手的浏览器兼容的问题,主要调试的浏览器为 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写法:

区别IE6FF
background:orange; *background:blue;

区别IE6IE7
background:green !important; background:blue;

区别IE7FF
background:orange; *background:green;

区别FFIE7IE6
background:orange; *background:green !important; *background:blue;

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

IE6 IE7 FF * √ √ × !important × √ √

IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,firefox
background:orange;*background:green;_background:blue;

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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com