您的位置：首页 > Web前端 > CSS

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

2010-07-13 15:29 351 查看

我们在开发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表格 copyright www.divcss5.com divcss5

	IE6	IE7	FF
*	√	√	× copyright www.divcss5.com divcss5
!important	×	√ copyright www.divcss5.com divcss5	√

copyright www.divcss5.com divcss5

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

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

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

以上是介绍区别各浏览器的CSS hack的写法，下面我们简单介绍这些CSS hack用法： copyright www.divcss5.com divcss5

要求说明：假如我们设置一个类名为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黑边的正方形。

区别IE8浏览器的CSS hack

上次我们介绍了ie6、ie7、火狐（firefox）浏览器的css hack区别方法及运用，接下来我们介绍微软最新IE成员ie8与前面浏览器的css hack写法区别。在使用css hack中我们运用了CSS读取原理。同时安装ie6、ie7、ie8浏览器方法：IETester浏览器测试工具介绍。

CSS hack区分如下——注意顺序与浏览器CSS HACK位置：
CSS hack:区分IE6，IE7 ，IE8，firefox
　　区别不同浏览器，CSS hack写法：
　　区别FF与IE6：
　　background:orange;*background:blue; 解释：FF只能识别background:orange; IE6识别*background:blue;
区别IE7与IE6：
　　background:green !important;background:blue;或者*background:green;_background:blue;
区别IE6与IE8：
　　background:orange; /*/background:blue;/**/
　　区别IE7与IE8：
　　background:orange; /*/background:blue;/**/
　　区别FF与IE7：
　　background:orange; *background:green !important;
　　区别FF，IE7，IE8，IE6：
　　background:orange;*background:green;background:#111/9;_background:blue;
或者使用
区别FF，IE7，IE8，IE6：
background:orange;*background:green !important;background:#111/9;*background:blue;

CSS Hack实例例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS各浏览器css hack测试,www.divcss5.com测试</title>
<style type="text/css">

</style>
</head>
<body>
我是测试颜色，不在不同浏览器下显示颜色不同哦！-<a href="http://www.divcss5.com/">DIV+CSS</a> 

我是颜色在IE6显示 
我是颜色在ie7显示 
我是颜色在ie8显示 
我是颜色在火狐（firefox）显示
</body>
</html>

在线演示-点击这里
以上代码你拷贝到一个新建的html文件在不同版本浏览器测试就会有不同效果。运用此例子即可解决我们在日常DIV+CSS开发时候的css hack问题。

同时我们如果不想那么的麻烦来做IE8的css hack，我们只需要在html的<head></head>之间加入<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，最好加到CSS文件下发即可，在IE8 下和IE7下显示内容相同，这样我们只需区分IE6、IE7、火狐（firefox）的css hack即可。很多大型站点都采用在head加入此代码来减少css bug。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航