CSS常见兼容性问题及解决方法

r囧r小猫 2022-06-13 23:36 479阅读 0赞

最近在研究浏览器兼容性问题，所以准备写篇愽客记录一下（会持续更新）；  
浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。  
我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 **CSS hack**。  
CSS hack主要有三种：*IE条件注释法*、*CSS属性前缀法*、*选择器前缀法*；  
**主要的兼容问题**  
（1）最主要也是最常见的，就是**浏览器对标签的默认支持不同**，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 \*\{margin:0; padding:0;\} 但不推荐，而且它也并不完善，这里可以参考我的另外一篇愽客[常见的css重置设置][css]。  
（2）**IE6双边距bug**: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行；  
*解决的方式有两个*：  
1.给float元素添加display：inline 即可正常显示  
2.就是hack处理了，对IE6进行 \_margin-left:5px;  
（3）**上下margin重合问题**，相邻的两个div margin-left margin-right 不会重合，但相邻的margin-top margin-bottom会重合。  
解决办法就是不要同时采用top和bottom ,统一一些。  
（4）**标签属性min-height是不兼容**的，所以使用的时候也要稍微改改；

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

（5）**超链接访问过后样式就混乱**了，hover样式不出现了。其实主要是其CSS属性的排序问题。一般来说，最好按照这个顺序：L-V-H-A

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

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

-webkit-text-size-adjust: none;

（7）**鼠标的手势**：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer；  
（8）**CSS控制透明度问题**：一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60)；但在IE6下又有问题，所以又得弄成filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);  
（9）IE6下div高度无法小于10px；比如定义一条高2px的线条，FF和IE7都正常；但IE6就是10px；  
解决的办法有两种：  
添加overflow属性或设置fontsize大小为高度大小 ；

div{ height: 2px; overflow: hidden; background: #333; width: 100px; }
    div{ height: 2px; font-size: 2px; background: #333; width: 100px; }

（10）**CSS3 风格的前缀**  
如果你正在使用最新的 CSS 代码，比如 box-sizing，或者 background-clip等，确保你使用了合适的供应商前缀。

-moz- /* Firefox 和其他使用 Mozilla 浏览器引擎的浏览器 */ -webkit- /* Safari，Chrome 和其他使用了 Webkit 引擎的浏览器 */ -o- /* Opera */ -ms- /* IE 浏览器（但不总是 IE） */

[css]: http://blog.csdn.net/m0_38099607/article/details/72123578