您的位置:首页> 日志> 前端技术 正文

  最近设计部在制定前端标准化的工作,而实际工作中实现起来确并不是那么理想。遇到问题比较多,最近是项目中遇到毕竟麻烦的问题。不过依然是各大浏览器的兼容问题,在输出的时候经常会遇到IE6/7/8,FF、Chrome在宽度高度上面的小小误差,小到1px、大到2px不等……然后针对这一问题,就想着要有一次深入的了解,刺探各浏览器的底线。

首先是关于浏览器的背景:

IE6比较老的版本浏览器,用户比较多,特别是在国内,

IE7较新浏览器,更接近标准浏览器,

IE8算是微软标准浏览器,

火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的浏览器,一般我们以这个浏览器为输出参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.

 

因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6\IE7\火狐这3个浏览器即可兼容全部浏览器。

具体区别如下:

区别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能识别*,但不能识别 !important,

IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;以下是各浏览器CSS hack表格

 

另外再补充一个,下划线"_",

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

 

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

 

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

 

以上是介绍区别各浏览器的CSS hack的写法,下面我们简单介绍这些CSS hack用法:

 

要求说明:假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框,高度为100PX并要求,在IE6浏览器下宽度为100PX;IE7浏览器宽度下为150PX;火狐IE8谷歌浏览器下宽度为200PX;(PX是长度单位像素)

 

则CSS代码如下:

.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}

这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块;IE7浏览器宽度下为150PX高度为100px带1px的黑边框的方块;在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。

 

希望以上项目中遇到问题后的整理CSS hack对你有帮助。