CSS常见兼容性问题总结

女爷i 2022-04-17 02:46 297阅读 0赞

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

这里谈到的浏览器，主要指IE6/IE7/IE… FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争

**先来谈谈CSS Hack**

我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack.

CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。

**（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。**

\[![copycode.gif][]\](javascript:void(0); “复制代码”)

**(2)CSS属性前缀法，即是给css的属性添加前缀。比如 \* 可以被IE6/IE7识别，但 \_ 只能被IE6识别，IE6-IE10都可以识别 “\\9”，IE6不能识别!important FireFox不能识别 \* \_ \\9**

\[![copycode.gif][]\](javascript:void(0); “复制代码”)

可以先使用“\\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“\_”分离出IE6  
.type\{  
color: \#111; /* all */ color: \#222\\9; /* IE \*/  
*color: \#333; /* IE6/IE7 */ \_color: \#444; /* IE6 \*/ \}

所以可以按着优先级就能给特定的版本捎上特定颜色

\[![copycode.gif][]\](javascript:void(0); “复制代码”)

所以可以按着优先级就能给特定的版本捎上特定颜色

\[![copycode.gif][]\](javascript:void(0); “复制代码”)

为什么说一般呢…你看看下面这个例子，IE6貌似还认得出!important

其实也能看出来了，当属性一起写在\{\}里头时，前者肯定会被后者覆盖。要使!important有效，就应置于多个\{\}间。

h1\{color: \#f00 !important; \}  
h1\{color: \#000;\}  
h2\{color: \#f00 !important; color: \#000;\}

# test1h1> #

## test2h2> ##

说明：在标准模式中

*  “-″减号是IE6专有的hack
 *  “\\9″ IE6/IE7/IE8/IE9/IE10都生效
 *  “\\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
 *  “\\9\\0″ 只对IE9/IE10生效，是IE9/10的hack

**（3）选择器前缀法，顾名思义，就是给选择器加上前缀。**

IE6可识别 \*div\{color:red;\} IE7可识别 \*+div\{color:red;\}

@media screen\\9\{…\}只对IE6/7生效

@media \\0screen \{body \{ background: red; \}\}只对IE8有效

@media \\0screen,screen\\9\{body \{ background: blue; \}\}只对IE6/7/8有效

@media screen\\0 \{body \{ background: green; \}\} 只对IE8/9/10有效

@media screen and (min-width:0\\0) \{body \{ background: gray; \}\} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) \{body \{ background: orange; \}\} 只对IE10有效 等等

**再来看看主要的兼容问题：**

\**（1）最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 \{margin:0; padding:0;\} 但不推荐，而且它也并不完善。*

贴一个淘宝的样式初始化~

\[![copycode.gif][]\](javascript:void(0); “复制代码”)

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td \{ margin:0; padding:0; \} body, button, input, select, textarea \{ font:12px/1.5tahoma, arial, \\5b8b\\4f53; \} h1, h2, h3, h4, h5, h6\{ font-size:100%; \} address, cite, dfn, em, var \{ font-style:normal; \} code, kbd, pre, samp \{ font-family:couriernew, courier, monospace; \} small\{ font-size:12px; \} ul, ol \{ list-style:none; \} a \{ text-decoration:none; \} a:hover \{ text-decoration:underline; \} sup \{ vertical-align:text-top; \} sub\{ vertical-align:text-bottom; \} legend \{ color:\#000; \} fieldset, img \{ border:0; \} button, input, select, textarea \{ font-size:100%; \} table \{ border-collapse:collapse; border-spacing:0; \}

\[![copycode.gif][]\](javascript:void(0); “复制代码”)

**(2)IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行**

\[![copycode.gif][]\](javascript:void(0); “复制代码”)

html,body,div{ margin: 0;padding: 0;} .wrap{width: 200px; height: 200px; border: 1px solid #333;} .box{float: left; /* display:inline */ ;margin-left: 10px; width: 80px; height: 80px; background-color: green;}

\[![copycode.gif][]\](javascript:void(0); “复制代码”)

解决的方式有两个：

1.给float元素添加display：inline 即可正常显示

2.就是hack处理了，对IE6进行 \_margin-left:5px;

\*\* (3)跟上述差不多，也属于IE6双边距bug: 行内属性标签，为了设置宽高，我们经常就会设置成display：block; 这样一来就产生上述的问题。\*\*

解决办法也是天津display：inline; 但是这样一来我们就不能设置宽高了，所以呢需要再加个 display:table.

所以你设置display:block后，再添上display:inline和display:table

**(4)上下margin重合问题，相邻的两个div margin-left margin-right 不会重合，但相邻的margin-top margin-bottom会重合。**

.box1\{width: 200px;height: 200px; border: 1px solid \#333; \}  
.mt\{margin-top: 10px;\}  
.mb\{margin-bottom: 10px;\}

div>

\*\*（5）有些浏览器解析img标签也有不同，img是行内的，一般都会紧接着排放，但是在有些情况下还是会突然出现个间距，解决办法是给它来个浮动 float \*\*

**(6)标签属性min-height是不兼容的，所以使用的时候也要稍微改改。这样吧：**

.box\{min-height:100px;height:auto !important; height:100px; overflow:visible;\}

**(7)很多时候可能会纳闷超链接访问过后 样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。一般来说，最好按照这个顺序：L-V-H-A**

简单的记法是 love hate

a:link\{\} a:visited\{\} a:hover\{\} a:active\{\}

**(8)chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：**

\-webkit-text-size-adjust: none;

**（9)png24位的图片在IE6下面会出现背景，所以最好还是使用png8格式的**

\*\*　　(10)因为存在两种盒子模式：IE盒子模式和W3C标准模式，所以对象的实际宽度也要注意。\*\*

IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)  
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

**（11）鼠标的手势也有问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer**

**（12）有个说法是：FireFox无法解析简写的padding属性设置。**

如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px。但我试了一下，发现还是可以解析的，难道是版本的原因？

**（13）消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px**; 其中margin属性对IE有效，padding属性对FireFox有效

\*\*（14）CSS控制透明度问题：\*\*一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60)

但在IE6下又有问题，所以又得弄成 filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

**(15)有些时候图片下方会出现一条间隙，通常会出现在FF和IE6下面比如**

![Image 1][]div> 一般给img添加vertical-align属性即可，比如top middle img\{verticle-align:center;\}

**(16)IE6下div高度无法小于10px**

比如定义一条高2px的线条，FF和IE7都正常

![151625266201968.png][]

但IE6就是10px

![151625453868168.png][]

解决的办法有两种：添加overflow属性或设置fontsize大小为高度大小 如：

div>

&nbps;div>

[copycode.gif]: /images/20220417/011c9586455c42a9b8c9175f3e4ef564.png
[Image 1]: 
[151625266201968.png]: /images/20220417/2875c9fd82054bd2a48b6f34aa560f5f.png
[151625453868168.png]: /images/20220417/760afdff5a9e41dd99c8a4564d92c8f0.png