您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

针对主流浏览器的CSS-HACK写法及IE常用条件注释

2025/8/9 19:36:18发布37次查看
本文将为你总结css针对各浏览器的兼容hack(以ie6/ie7/ie8 /ff为主),以及ie特有的条件注释使用方法.
对于前端工作者,最痛苦的事莫过于浏览器兼容性的调试,而这最痛苦的事中,最变态的莫过于微软的三个版本ie6.0/ie7.0/ie8.0. 为了让所写代码在各主流浏览器中正常运行,我们不得不为各种浏览器写对应的样式。本文,青鸟将为你总结css针对各浏览器的兼容hack(以ie6/ie7/ie8 /ff为主),以及ie特有的条件注释使用方法.
一、通用区分方式:
ie6、ie7能识别*,标准浏览器(如ff)不能识别*;
ie6能识别*,但不能识别 !important;
ie7能识别*,也能识别 !important;
ie8能识别\0,不能识别*,+,_,* 加!important;
ff不能识别*,但能识别 !important;
例如style=”*width:10px!important; width:20px;”,其在ie7下宽度为10px,在ie6下宽度是20px.
其中还有如下三种写法:
第一种
width:100px; /* firefox及其他浏览器 */width:200px\0; /* ie8能识别\0*/*width:300px!important; /* ,ie7 既能能识别*号,也能识别important */*width:400px; /* ie6也能识别*号 *//*mr.think提示:请注意书写顺序@mrthink.net*/
第二种
width:100px; /* firefox及其他浏览器 */width:200px\0; /* ie8能识别\0*/*width:300px; /* ie7也能识别*号 */_width:400px; /* ie6能识别下划线*//*mr.think提示:请注意书写顺序@mrthink.net*/
第三种
width:100px; /* firefox及其他浏览器 */width:200px\0; /* ie8能识别\0*/+width:300px; /* +只识别ie7 */_width:400px; /* ie6能识别下划线*//*mr.think提示:请注意书写顺序@mrthink.net*/
二、不常见的hack(op表示opera,sa表示safari),其中第3条比较实用
1..color1{ color:#f00; color/*\**/:#00f /*\**/}/*ie6,ie7,ie8,ff,op,sa识别*/2..color2{ color:#f00; color /*\**/:#00f /*\9**/}/*ie7,ie8,ff,op,sa识别*/3..color3{ color:#f00; color/*\**/:#00f \9}/*ie6,ie7,ie8识别*/4..color4{ color:#f00; color /*\**/:#00f\9}/*ie7,ie8识别*//*“color”和“/*\**/”之间有个空格*/
三、各种浏览器独立支持的hack
width:100px\0;/* 支持ie8 */_width:100px; /* 支持ie6 */[width:100px; /* 支持ie6,7 */+width:100px; /* 支持ie6,7 */*width:100px; /* 支持ie6,7 */*width:100px!important; /* 支持ie6,7, */*+width:100px; /* 支持ie6,7, */*+width:100px!important;/* 支持ie6,7, */width:100px\9; /* 支持ie6,7,8 */width:100px!important; /* 支持ie6,7,8,ff */w\idth:100px; /*ie5.x不支持 ie6、ie7、ie8、ff支持 */
四、ie特有的html条件注释使用规则
1.仅ie可见的写法
3b91107ae0f6dc60cbcc0243262d767f此处内容只有ie可见dbeaff94c2f1d72b0d673ef6e0c76b56
2.仅ie6可见的写法
0a39b45b377719e53fed57c70fa2ea3c此处内容只有ie6.0可见9e1b4054f475296028329751915c2801
3.仅ie7可见的写法
fa2c222463245b9d8ed3578f0be38188此处内容只有ie7.0可见9e1b4054f475296028329751915c2801
4.版本区间可显示写法
77ff45aa02bda806843bc31600e44271 ie6以及ie6以下版本可识别 1b771f47d72d900ba74308aee59557f0
91029187a47d4c3a99cc198a5627b173 ie6以及ie6以上版本可识别 1b771f47d72d900ba74308aee59557f0
000cd64ace4601dafacd68f50829db82 ie7以及ie7以下版本可识别 1b771f47d72d900ba74308aee59557f0
f92958435b2b094c55bbcf32a6c93dd8 ie7以及ie7以上版本可识别 1b771f47d72d900ba74308aee59557f0
5.非ie可见的写法(注意:此条不符合web标准,但的确实用)
dbf5feeb0d676154b00e7fac3915442f此处内容只非ie可见1b771f47d72d900ba74308aee59557f0
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注!
相关推荐:
关于css编程的oocss和smacss设计模式的介绍
css3中的transition过度与animation动画属性的使用介绍
以上就是针对主流浏览器的css-hack写法及ie常用条件注释的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product