CSS常见兼容性问题总结

悠悠 2022-07-12 03:27 175阅读 0赞

本文有部分是从别的大神博客看来的，有部分是自己平时遇到的 ，一并写下来，当然肯定是不全的，欢迎大家补充

1、首先是div居中问题，通常写法为

<!DOCTYPE html>
    <head>
    <style type='text/css'>
    #first {
    margin:0 auth;
    width:100px;
    height:200px;
    background-color:blue;
    }
    </style>
    </head>
    <body>
    <div  id='first'>
    </div>
    </body>

上述代码在chrom下IE7 等是正常居中的，如图：

![Center][]

然而上述代码在混杂模式下却失败了

![Center 1][]

解决办法是外加层div style定义为：text-align:center,问题解决

2.我们在许多css文件的开头经常会见到这么一段文字

\*  \{

margin:0;

padding:0;

这个是css reset，出现这个的原因是因为浏览器对标签的默认支持不同(我记得好像是IE默认的margin是10px吧，记不清楚了)，所以我们要统一，下面粘贴一段来自其它博客的淘宝css reset

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
        body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
        h1, h2, h3, h4, h5, h6{ font-size:100%; }
        address, cite, dfn, em, var { font-style:normal; }
        code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
        small{ font-size:12px; }
        ul, ol { list-style:none; }
        a { text-decoration:none; }
        a:hover { text-decoration:underline; }
        sup { vertical-align:text-top; }
        sub{ vertical-align:text-bottom; }
        legend { color:#000; }
        fieldset, img { border:0; }
        button, input, select, textarea { font-size:100%; }
        table { border-collapse:collapse; border-spacing:0; }

3.关于div的高度不能小于10px

这段代码在chrome或者IE7等下正常显示就是一条细线，然而在IE6以及其它混杂模式下，将变为10px;

网上百度了下，解决办法不外乎两个：

一个是设置font-size；另一种是设置overflow属性

4.上下margin重合问题，这个不是兼容性的问题，以为不管是在chorme上还是IE上都会出现问题，相邻的两个div margin-left  margin-right不会重合

但是相邻的margin-top margin-bottom会重合

<!DOCTYPE html>
     <head>
         <title></title>
         <style type="text/css">
        .box{width: 200px;height: 200px; border: 1px solid #333; }
        .first{margin-top: 10px;}
        .second{margin-bottom: 10px;}
         </style>
     </head>
     <body>
    <div class="box second"></div>
    <div class="box first"></div>
    
     </body>
     </html>

![Center 2][]

也就是说这个并不是加和的关系，而是取最大的值来做，如果margin-top:20px margin-bottom:10px 则去20px

5.从别处拷贝来的，真实性未测试

IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行

IE6左边上边距：

![Center 3][]

IE7没有问题：

![Center 4][]

解决方式有两个

1、给float元素添加display:inlilne即可正常显示

2.hack处理，对IE6进行——margin-left:5px;

相似问题：也属于IE双边距bug:行内属性标签，为了设置宽高，我们经常互设置为display:block，这样一来就会产生上述问题，解决办法也是添加display:inline，这样一来不能设置宽高了，所以呢需要在添加display:table

7、应该不算是兼容性问题吧，但是也是关于CSS的，问题描述；有时候图片周围会出现间隙：

<!DOCTYPE html>
     <head>
         <title></title>
         <style type="text/css">
      
         </style>
     </head>
     <body>
    
    <div>
    <div style=''><img src="Hydrangeas.jpg" style='height:50px;width:50px;'/>
    <span >hello</span>
    </div>
     </body>
     </html>

![Center 5][]

hello和前面的图之间有间隙，解决方案：父类中设置font-size:0px，然后再设置字体打下

<!DOCTYPE html>
     <head>
         <title></title>
         <style type="text/css">
      
         </style>
     </head>
     <body>
    
    <div>
    <div style='font-size:0px;'><img src="Hydrangeas.jpg" style='height:50px;width:50px;'/>
    <span style='font-size:12px;'>hello</span>
    </div>
     </body>
     </html>

![Center 6][]  
问题解决

下面的这些是针对常见的问题的一些解决办法

8.关于css透明度设置，普通浏览器设置的 时候直接设置为opacity:0.7即可，但是这个在IE浏览器下却不起作用，IE浏览器设置为filter:alpha(opacity=70)

9.消除ul ol等列表的缩进，

样式应该写成：list-stytle:none;margin:0px;padding:0px;其中margin属性对IE有效，padding对Firefox有效 
      
       其他还有的欢迎大家补充~~~~~

[Center]: /images/20220711/977f63487be1489d8161a46f2cc0315f.png
[Center 1]: /images/20220711/d6d5d99646104673bd6381165bbe6a5c.png
[Center 2]: /images/20220711/65856a0010f2425c8811d6195326d606.png
[Center 3]: /images/20220711/0c52f1b027d3495c8c9f8782710708bd.png
[Center 4]: /images/20220711/31a1f8b8e720416eb51f9a80aa925f24.png
[Center 5]: /images/20220711/1ef90cec244f4f19a0ece282558d9043.png
[Center 6]: /images/20220711/6ec0748617f645b39786b3c964514b27.png