浏览器样式兼容性问题及解决方案（一）

标签：css   浏览器   class   标签   

工作中经常会碰到浏览器样式兼容性的问题，从今天开始，收集和整理一些常见的兼容性问题，系统的学习下前端知识，欢迎大家指正交流。

1、浏览器默认的标签内外边距不同，用通配符*统一设置为0

*{margin:0px; height:0px;}

2、标签最低高度min-height不兼容

{min-height:200px; height:auto !Important; height:200px; overflow:visible;}

3、设置较小高度标签

当给指定标签设置较小高度时，就碰到与浏览器默认最小高度冲突的问题，解决的方法就是设置overflow:hidden或line-height小于标签高度。

4、透明度兼容性

.transparent_class {  
     filter:alpha(opacity=50);  /*IE下的透明度设置方法，只对IE有效*/
     -moz-opacity:0.5;          /*主要针对老版本的Mozilla 浏览器，如Netscape Navigator*/
     -khtml-opacity: 0.5;       /*老版本Safari (1.x)的内核引擎使用的是KTHML*/
     opacity: 0.5;              /*这是当前标准的设置方法*/
} 

PS：这种设置透明度的方法会让内部的内容（如文字、图片）也变成半透明，而在一些需求中， 只需要背景半透明，那就需要定义两个兄弟div，一个设置为半透明作为背景，另一个作为内容，绝对定位到前面div的上面。当然，现在的CSS3标准在设置背景属性时同时可以设置背景的透明度了。

5、清除浮动的两种方法

第一种方法：直接在父容器引用clearfix类

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}

第二种方法：在父容器内部末尾加一个div，引用clear类

.clear{clear:both;height:0px;overflow:hidden;}

浏览器样式兼容性问题及解决方案（一）,布布扣,bubuko.com

浏览器样式兼容性问题及解决方案（一）

标签：css   浏览器   class   标签   

原文地址：http://blog.csdn.net/wustwyj/article/details/37740697