时间:2021-05-08
对于前端工作者,最痛苦的事莫过于浏览器兼容性的调试,而这最痛苦的事中,最变态的莫过于微软的三个版本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;第三种
width:100px;二、不常见的HACK(OP表示Opera,SA表示Safari),其中第3条比较实用
1..color1{ color:#F00; color/*\**/:#00F /*\**/}
2..color2{ color:#F00; color /*\**/:#00F /*\9**/}
3..color3{ color:#F00; color/*\**/:#00F \9}
4..color4{ color:#F00; color /*\**/:#00F\9}/*“color”和“/*\**/”之间有个空格*/
三、各种浏览器独立支持的hack
width:100px\0;
_width:100px;
[width:100px;
+width:100px;
*width:100px;
*width:100px!important;
*+width:100px;
*+width:100px!important;
width:100px\9;
width:100px!important;
w\idth:100px;
四、IE特有的html条件注释使用规则
1.仅IE可见的写法
2.仅IE6可见的写法
<!-–[if IE 6]>此处内容只有IE6.0可见<![endif]–->3.仅IE7可见的写法
<!–-[if IE 7]>此处内容只有IE7.0可见<![endif]–->4.版本区间可显示写法
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--><!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->5.非IE可见的写法(注意:此条不符合WEB标准,但的确实用)
<!--[if !IE]>此处内容只非IE可见<![endif]-->声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
条件注释判断浏览器.除IE外都可识别
浏览器的条件注释理论,用下面一段例子来解释这个问题(X)HTML下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果复制代码代码如下:下面的代码是在非IE
ie5hack,ie6hack,ie8hack,ie9我没用,暂时也没接触过9的hack,随着浏览器的更新(而且换代越来越快),是不是我有写不完的hack,还是
由于浏览器版本的不同,对CSS里某些元素的解释也不一样,针对浏览器版本不同而选择不同CSS的代码,其实我们还可以利用条件注释的方法来达到类似的目的,什么是条件注
概述如果你厌烦了为低版本IE写又臭又长的hack,IE条件注释将是比较优美的解决方法。当然条件注释的功能不仅仅是以上那些功能,除了规避写出恶心的hack,它还可