关于css兼容问题已经是老生常谈的问题了,今天主要是把自己遇到过的一些问题进行总结记录!
一.常用的css hack:
!important常常被我们用来识别IE6的hack,但这其实是一个误区,!important其实应该是用来增加权重从而更改样式的,ie6只是在某些情况下会忽略!important!ie6下,同一个大括号里对同一个样式属性定义,其中一个加important 则important标记是被忽略的,例:{background:red!important; background:blue;} ie6下解释为背景色blue,其它浏览器解释为背景色red;如果这同一个样式在不同大括号里定义,其中一个加important 则important发挥正常作用,例:div{background:red!important} div{background:blue},这时所有浏览器统一解释为背景色red。
IE浏览器各版本 CSS hack 对照表
hack | 写法 | 实例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
* | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
+ | +color | 绿色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
- | -color | 黄色 | Y | Y | N | N | N | N | N | N | N | N |
_ | _color | 蓝色 | Y | Y | N | Y | N | Y | N | Y | N | N |
# | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
\0 | color:red\0 | 红色 | N | N | N | N | Y | N | Y | N | Y | N |
\9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
!important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
说明:在标准模式中:
-
“-″减号是IE6专有的hack
-
“\9″ IE6/IE7/IE8/IE9/IE10都生效
-
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
-
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
二.常见的兼容问题:
-
最常见也是最基础的,字体大小及标签默认样式差异,可以通过css初始化来解决如:*{margin:0; padding:0; font-size:14px;}
-
浮动相关:
ie6下浮动产生双倍边距。使用display:inline;解决!
DIV浮动ie6下文本产生3象素的bug。使用margin-right:-3px解决
浮动导致父级标签无法被内容撑开!使用清楚浮动来解决!
-
清除浮动的几种常用方式:
在使用了浮动的标签最好要清除浮动使用:clear:both;
或者给父标签确定高度,如:height:200px;
或者给父标签添加overflow:auto;为了兼容ie6要加上zoom:1;
-
img下的留白,使用display:block解决
-
有的时候在IE6上看见一些奇怪的间隙,可我们高度明明设好了呀。 解决办法:试试在有空隙的DIV上加上"font-size:0px;"
-
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0; 解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;};
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步