最近在研究浏览器兼容性问题,所以准备写篇愽客记录一下(会持续更新);
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。
我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack
CSS hack主要有三种:IE条件注释法CSS属性前缀法选择器前缀法
主要的兼容问题
(1)最主要也是最常见的,就是浏览器对标签的默认支持不同,所以我们要统一,就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐,而且它也并不完善,这里可以参考我的另外一篇愽客常见的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) */