经常遇到的浏览器兼容性有哪些？如何解决？
1、浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
2、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。测试代码如下：
<html> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> .one{ float: left; width: 150px; height:150px; background:#EEE; margin: 5px 0 5px 150px; } </style> </head> <body> <div class="one">Double Margin Bug(150*150)</div> </body> </html>
正常的应该是：
但在IE6中是这样的：
加上display:inline;后才正常。
3、在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上overflow:hidden或设置line-height为更小的高度。测试代码：
.one{ height:5px; width:100px; background:#F60; }
HTML没变，还是<div class="one"></div>，在IE6下显示为：
这个一看就知道不止5px，CSS改为下面两种之一就可以了：
.one{ height:5px; width:100px; overflow:hidden; background:#F60; } /*--或--*/ .one{ height:5px; width:100px; font-size:2px; line-height:2px; background:#F60; }
注意这里加了line-height:2px后还要加上font-size才行。效果如图：
4、min-height在IE6下不起作用。解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值。
5、透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;
6、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:none;}样式。
7、input边框问题。去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。
ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。
解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。
8、父子标签间用margin的问题，表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上，IE6&7下没有转移。测试代码：
<body> <style type="text/css"> .box1{ height:150px; background:#CCC; } .box1_1{ height:50px; margin-top:50px; background:#AAA; } </style> <div class="box1"> <div class="box1_1">box1_1</div> </div> </body>
chrome & FireFox & IE8 & IE9下的效果为：
IE6 & IE7 下的效果：
对于这两种显示效果，我倒认为IE6&IE7是正确的，不知道是否有朋友能给出解释。
解决办法就是父子标签间的间隔建议用padding，兄弟标签间用margin。
9、假设两块div，第一块浮动而第二块没有浮动，IE6下第二块就会跑到第一块边上，并且二者之间还留有间距，但标准浏览器中是第二块重合于第一块。测试代码：
<body> <style type="text/css"> div{ width:100px; height:100px; border:1px solid #CCC; } .one{ float:left; height:50px; } </style> <div class="one">One</div> <div class="two">Two</div> </body>
正常应该是：
IE6中是：
解决办法是改变设计思路，如果真有两个div重合的需求，可以用下面的代码实现：
<body> <style type="text/css"> div{ width:100px; height:100px; border:1px solid #CCC; } .parent{ position:relative; } .one{ position:absolute; left:0; top:0; } </style> <div class="parent"> <div class="one">One</div> <div class="one">Two</div> </div> </body>
10、父子关系的标签，子标签浮动导致父标签不再包裹子标签。测试代码：
<body> <style type="text/css"> .parent{ background:#888; border:5px solid #888; } .one{ float:left; width:100px; height:100px; background:#F60; } </style> <div class="parent"> <div class="one">One</div> </div> </body>
在IE、Chrome、Firefox下都是下面的效果：
可以看到父元素并没有包裹子元素，这是因为float造成的，解决方案是清除浮动就行了，用下面的代码可以解决：
<body> <style type="text/css"> .parent{ background:#888; border:5px solid #888; zoom:1;/*--for IE--*/ } .parent:after{ /*--for other broswer--*/ content:"."; display:block; line-height:0; clear:both; visibility:hidden; } .one{ float:left; width:100px; height:100px; background:#F60; } </style> <div class="parent"> <div class="one">One</div> </div> </body>
现在效果是：
最后关于float力荐两篇文章：CSS float浮动的深入研究、详解及拓展(一)、CSS float浮动的深入研究、详解及拓展(二)
from: http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html
