首页 > 代码库 > 浏览器样式兼容性问题及解决方案(一)
浏览器样式兼容性问题及解决方案(一)
工作中经常会碰到浏览器样式兼容性的问题,从今天开始,收集和整理一些常见的兼容性问题,系统的学习下前端知识,欢迎大家指正交流。
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;}
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。