您好,欢迎光临本店!  登录  免费注册
当前位置: 首页 > 站长资讯 > 网站建设知识 > CSS之区别不同浏览器的写法

CSS之区别不同浏览器的写法

WEB新概念建站源码超市 / 2012-02-22
[] [] []

我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同,如宽度、高度等地方有相差误。

IE6比较老的版本浏览器,用户比较多,
IE7较新浏览器,更接近标准浏览器,
IE8算是微软标准浏览器,但差别于浏览器,
火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的IE浏览器,一般我们以这个浏览器为开发参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.

因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6\IE7\火狐(Firefox)这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
 FF
 
*
 √
 √
 ×
 
!important
 ×
 √
 √
 

另外再补充一个,下划线"_",
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黑边的正方形。

希望以上div+css整理CSS hack对你有帮助。

浏览过此页用户还浏览以下内容:
区别IE8浏览器的CSS hack
 

用户评论
暂时还没有任何用户评论
用户名: 匿名用户
E-mail:
评价等级:
评论内容:
验证码: captcha

相关商品

网店帮助

© 2005-2017 WEB新概念建站源码超市 版权所有,并保留所有权利。
广东省东莞市南城行政中心区簪花路华南建设大厦707室WEB新概念网络科技 Tel: 罗先生13480055593,黄先生15102077200 E-mail: server@webxgn.com
QQ 784159683 QQ 2267914584 MSN Messi.h2009@hotmail.com
ICP备案证书号:粤ICP备10099352号
支付宝信任商家 广东省网站信用联盟 支付宝信任商家 网络消费安全港 网警
分享到:
新概念源码超市
源码咨询:
源码咨询:
代理咨询:
代理咨询: