CSS的解决IE5/IE5.5/IE6/FF/IE7的兼容性问题(css hack)
2008-03-01 17:35
507 查看
之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题。不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团,一直听说IE5是WEB标准制作的一个“钉子户”,现在不得不相信了。
既然有问题,那就找找解决的方法咯,在网上一搜,相关的文章还是不少的,觉得最直接的方法还是“IE条件注释”,很方便的就能为IE的不同版本写样式。但这样就得为每个版本写一个样式,不利于文件的优化。
找了一些相关的CSS HACK后,觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的,经过测试,终于找到了一个不错的方法,下面我们来看看怎么实现:
大家都知道用!important声明可以提升指定样式规则的应用优先权,如下面的例子:
<style>
</style>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>
解释一下:
上面的css在firefox中,它是认识不了后面的那个带星号*的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。
CSS hack:区分IE6,IE7,firefox
区别不同浏览器,CSS hack写法:
区别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;
既然有问题,那就找找解决的方法咯,在网上一搜,相关的文章还是不少的,觉得最直接的方法还是“IE条件注释”,很方便的就能为IE的不同版本写样式。但这样就得为每个版本写一个样式,不利于文件的优化。
找了一些相关的CSS HACK后,觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的,经过测试,终于找到了一个不错的方法,下面我们来看看怎么实现:
大家都知道用!important声明可以提升指定样式规则的应用优先权,如下面的例子:
<style>
</style>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>
解释一下:
上面的css在firefox中,它是认识不了后面的那个带星号*的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。
CSS hack:区分IE6,IE7,firefox
区别不同浏览器,CSS hack写法:
区别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;
IE6 IE7 FF * √ √ × !important × √ √
相关文章推荐
- CSS的解决IE5/IE5.5/IE6/FF的兼容性问题
- IE6/Firefox CSS兼容问题 - 解决IE5/IE5.5/IE6/Firefox的CSS兼容性问题
- 【转】 解决IE5/IE5.5/IE6/FF的兼容性问题
- 解决DIV+CSS设计在IE6/IE7/IE8/火狐-兼容性问题
- IE6-IE9兼容性问题列表及解决办法_补遗漏之二:CSS区分大小写,Style中height需要加px
- javascript和css在ie和firefox中关于兼容性问题的解决办法
- 在head标签里加一个meta标签让指定ie使用特定内核 解决css在ie中的兼容性问题
- CSS Hack解决浏览器IE部分属性兼容性问题
- 解决DIV+CSS设计在IE6/IE7/IE8/火狐-兼容性问题
- IE6/7/8 CSS兼容性问题和解决方法汇总
- (转)IE和火狐的css兼容性问题归总
- IE下CSS问题及解决
- IE.JS解决IE兼容性问题方法
- CSS中div垂直居中(包含解决IE兼容问题)
- 关于CSS+DIV 开发 与各浏览器的兼容性问题..解决方法.
- IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法
- 在编程过程中需要注意的火狐和IE兼容性问题和解决方法
- 如何解决cellIndex在IE下兼容性问题
- CSS常见兼容性问题及解决办法汇总