zoukankan      html  css  js  c++  java
  • 浏览器样式兼容性问题及解决方式(一)

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


    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;}

  • 相关阅读:
    The first appliaction for "Hello World!"
    zone
    learn to study
    深入理解 Angular 2 变化监测和 ngZone
    看看吧
    生命周期钩子
    一个简单的todo
    依赖注入
    @Output()
    @Input
  • 原文地址:https://www.cnblogs.com/lytwajue/p/7103193.html
Copyright © 2011-2022 走看看