zoukankan      html  css  js  c++  java
  • # 浏览器兼容性 小结

    https://www.zybuluo.com/denglongku/note/532873

    一、IE5,IE6不兼容HTML5标签
    解决办法:

    若只有少量标签:可采用自定义标签的方式

    <script>
    document.createElement('header'); //自定义元素,默认为内联元素
    </script>
    <style>
    header{display:block;}
    </style>
    

    大量标签:

    使用JS库
    <script src='js/html5shiv.js'></script>
    

    二、 IE6,IE7中元素浮动失效
    解决办法:

    给元素设置宽度
    如果元素不能设置宽度,那么就给元素内部的块级元素也设置浮动

    三、IE6下浮动元素与margin元素间出现缝隙

    <span class='span1'></span>
    <span class='span2'></span>
    
    .span1{100px; height:100px;float:left;}
    .span2{margin-left:100px;}
    

    解决办法:

    1.不提倡这种写法,因为设置浮动的元素的层级提升了,在渲染时不好
    2.如果必须这样写,那么就给两个元素都设置浮动

    四、IE6中,不要让子元素的宽高大于其父级元素

    五、

    ,不能嵌套块级元素

    六、IE6中,margin-top传递问题不能使用为父级元素添加border的方法解决

    解决办法:

    .box{overflow:hidden;
    zoom:1;}
    

    七、IE6,IE7中,当元素浮动时,会出现双倍margin

    解决办法:*代表 for IE6,IE7

    div{*display:inline;}  
    

    八、、IE6,IE7中,当li的子元素浮动时,li之间会出现4px的间隙

    解决办法:*代表 for IE6,IE7

    li{*vertical-align:top;}
    

    九、浮动元素之间,如果有注释或者内联元素,并且浮动元素和其父级元素的宽度差小于3px,会导致多复制一个文字
    解决办法:

    1.不要出现注释或者内联元素
    2.宽度差大于3px

    十、IE6,IE7中,父元素设置overflow:hidden;超出隐藏,但是如果子元素设置了position:relative,会导致超出隐藏失效
    解决办法:给父元素设置

    .father{*position:relative;}

    十一、IE6中,父级元素宽高为奇数时,会出现1px偏差

    这种情况,就要出问题:
    .son{position:absolute; left:0; top:0;}
    .father{position:absolute;/或者 position:relative;/}/并且宽高为奇数/

    解决办法:避免父级元素宽高为奇数,就好啦~

    十二、IE6中,absolute元素和float元素并列或者处于同级,会导致absolute元素消失

    解决办法:别让他俩并列啦

    十三、IE6中,input元素会露出父级元素背景色

    解决办法:

    input{float:left;}
    

    十四、IE6中,可输入的表单控件的背景,会被输入的内容挤走

    解决办法:

    {background-attachment:fixed;}
    

    十五、CSS hack

    9:支持IE7-10

    background-color:blue9;
    

    *:支持IE6,IE7及以下

    *background-color:blue;
    

    _:支持IE6及以下

    _background-color:red;
    

    十六、IE6不支持PNG24的图片
    解决办法:

    使用js插件:

    <script src='js/DD_belatedPNG-8.0.8a.js'></script>
    <script>
    DD_belatedPNG.fix('img,div'); //括号内写有png24图片的标签
    </script>
    

    使用原生滤镜(透明度)

    body{
    _background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src'',sizingMethod'',/*还有啥...*/)
    }
    

    十七、样式优先级顺序

    !important > 行间样式 > #id > .class > 标签

  • 相关阅读:
    故障-因为MAC地址冲突造成的故障
    MySQL安全审计(init_connect)
    GLIBC升级
    HTTPS优化与证书
    封装打包Python脚本
    fiddler进行弱网测试的坑
    Jmeter的安装
    win10安装Mysql
    linux常用命令(五)
    linux常用命令(四)
  • 原文地址:https://www.cnblogs.com/wuxiumei/p/5964579.html
Copyright © 2011-2022 走看看