请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 374|回复: 6

[css] CSS hack之间如何区分不同浏览器的写法

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-5 16:22:36 | 显示全部楼层 |阅读模式

我们在开发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黑边的正方形。

想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com

回复

使用道具 举报

0

主题

902

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-3-21 10:40:45 | 显示全部楼层
写的不错,支持一下哟
回复 支持 反对

使用道具 举报

0

主题

766

帖子

772

积分

高级会员

Rank: 4

积分
772
发表于 2016-3-22 19:14:24 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

7

主题

832

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2016-8-21 20:23:00 | 显示全部楼层
能再解释的细节一些吗,具体的
回复 支持 反对

使用道具 举报

0

主题

902

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-11-29 12:46:03 | 显示全部楼层
还有许多问题不明白,有点恼火啊!
回复 支持 反对

使用道具 举报

0

主题

895

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2018-10-9 10:45:26 | 显示全部楼层
写的不错,支持一下哟
回复 支持 反对

使用道具 举报

0

主题

957

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2018-10-12 13:46:26 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 18:59 , Processed in 0.428674 second(s), 33 queries .

快速回复 返回顶部 返回列表