css不同浏览器的兼容性

CSS（层叠样式表）是网页设计中必不可少的一部分，但是不同的浏览器对CSS有不同的解读方式，这就导致了在不同的浏览器中可能会有不同的样式展示。下面介绍一些常见的浏览器兼容问题以及如何解决。

1. 盒模型

box-sizing:content-box;
     /*标准盒模型*/box-sizing:border-box;
 /*IE盒模型*/

2. 浮动处理

.clearfix::before,.clearfix::after{
        content: "";
        display: table;
        clear: both;
}
.clearfix{
        zoom: 1;
 /*IE6/7*/}
    

3. 行内元素的块级化

display:inline-block;
     /*IE6/7*/zoom:1;
     /*IE6/7*/*display:inline;
     /*IE6/7*/vertical-align:middle;
 /*解决多个行内元素垂直居中*/

4. 图片失真问题

img{
        -webkit-transform-style: preserve-3d;
     /*解决iOS下图片失真*/    -moz-transform-style: preserve-3d;
     /*解决Firefox下图片失真*/    -o-transform-style: preserve-3d;
     /*解决Opera下图片失真*/    transform-style: preserve-3d;
}

5. 清空默认样式

*{
        margin:0;
        padding:0;
}
    

尽管CSS的兼容问题可能会给我们带来不少的麻烦，但是只要掌握了一些常见的解决方法，就可以轻松应对不同浏览器的兼容性问题。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！