常见浏览器兼容性问题与解决方案

问题一：不同浏览器的标签默认的外补丁和内补丁不同

症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：在css里面写上初始化代码 * { padding：0； margin： 0；}

问题二：IE6/IE7对display:inline-block的支持欠缺

症状：在IE6/IE7浏览器里面向下垂直

解决方案：把dispiay:inline-block;改为IE6的_display:inline;

问题三：IE6下浮动时margin双倍边距

症状：比如有一个div，其css为float:left，然后margin-left:20px,在主流浏览器中显示没有问题，但在ie6中则会出现双倍边距，即为40px。

20px 

40px 

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

症状：IE6里的间距比超过设置的间距

解决方案：在display:block;后面加入display:inline;display:table;

问题五：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

问题六：标签最低高度设置min-height不兼容

症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}