CSS常见兼容性问题总结

时间 2019-11-22

标签 css 常见兼容性问题总结栏目 CSS 繁體版

原文原文链接

浏览器的兼容性问题，一般是由于不一样的浏览器对同一段代码有不一样的解析，形成页面显示不统一的状况。javascript

这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。但更多的兼容仍是考虑IE6/IE7/FF之间的斗争css

先来谈谈CSS Hackhtml

　　咱们为了让页面造成统一的效果，要针对不一样的浏览器或不一样版本写出对应可解析的CSS样式，因此咱们就把这个针对不一样浏览器/版本而写CSS的过程叫作 CSS hack.java

　　CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。web

　　（1）IE条件注释法，即在正常代码以外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。chrome

<!--  lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 -->

<!-- [if IE]>
   你想要执行的代码 
<![endif]-->

<!-- [if lt IE 8]>
   你想要执行的代码 
<![endif]-->

<!-- [if ! IE 8]>
   你想要执行的代码 
<![endif]-->

(2)CSS属性前缀法，便是给css的属性添加前缀。好比 * 能够被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10均可以识别 "\9"，IE6不能识别!important FireFox不能识别 * _ \9浏览器

能够先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后能够用“_”分离出IE6

.type{
        color: #111; /* all */

        color: #222\9; /* IE */
        *color: #333; /* IE6/IE7 */
        _color: #444; /* IE6 */
        }

因此能够按着优先级就能给特定的版本捎上特定颜色

能够先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后能够用“_”分离出IE6

.type{
        color: #111; /* all */

        color: #222\9; /* IE */
        *color: #333; /* IE6/IE7 */
        _color: #444; /* IE6 */
        }

因此能够按着优先级就能给特定的版本捎上特定颜色

为何说通常呢...你看看下面这个例子，IE6貌似还认得出!important spa

其实也能看出来了，当属性一块儿写在{}里头时，前者确定会被后者覆盖。要使!important有效，就应置于多个{}间。code

    h1{color: #f00 !important; }
    h1{color: #000;}
    h2{color: #f00 !important; color: #000;}

<h1>test1</h1>
<h2>test2</h2>

说明：在标准模式中orm

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

　　（3）选择器前缀法，顾名思义，就是给选择器加上前缀。

IE6可识别 *div{color:red;}  
IE7可识别 *+div{color:red;}

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

再来看看主要的兼容问题：

（1）最主要也是最多见的，就是浏览器对标签的默认支持不一样，因此咱们要统一，就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐，并且它也并不完善。

贴一个淘宝的样式初始化~

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

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

<style type="text/css">
    html,body,div{ margin: 0;padding: 0;}
    .wrap{width: 200px; height: 200px; border: 1px solid #333;}
    .box{float: left; /* display:inline */ ;margin-left: 10px; width: 80px; height: 80px; background-color: green;}
    </style>
</head>

<body>

<div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
</div>
<script type="text/javascript">

</script>
</body>

解决的方式有两个：

1.给float元素添加display：inline 便可正常显示

2.就是hack处理了，对IE6进行 _margin-left:5px;

　 (3)跟上述差很少，也属于IE6双边距bug: 行内属性标签，为了设置宽高，咱们常常就会设置成display：block; 这样一来就产生上述的问题。

解决办法也是天津display：inline; 可是这样一来咱们就不能设置宽高了，因此呢须要再加个 display:table.

因此你设置display:block后，再添上display:inline和display:table

　　(4)上下margin重合问题，相邻的两个div margin-left margin-right 不会重合，但相邻的margin-top margin-bottom会重合。

.box1{width: 200px;height: 200px; border: 1px solid #333; }
    .mt{margin-top: 10px;}
    .mb{margin-bottom: 10px;}

<div class="box1 mb"></div>
<div class="box1 mt"></div>

（5）有些浏览器解析img标签也有不一样，img是行内的，通常都会紧接着排放，可是在有些状况下仍是会忽然出现个间距，解决办法是给它来个浮动 float

(6)标签属性min-height是不兼容的，因此使用的时候也要稍微改改。这样吧：

.box{min-height:100px;height:auto !important; height:100px; overflow:visible;}

(7)不少时候可能会纳闷超连接访问事后样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。通常来讲，最好按照这个顺序：L-V-H-A

简单的记法是  love  hate 

a:link{}  a:visited{}  a:hover{}  a:active{}

(8)chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：

-webkit-text-size-adjust: none;

（9)png24位的图片在IE6下面会出现背景，因此最好仍是使用png8格式的

　　(10)由于存在两种盒子模式：IE盒子模式和W3C标准模式，因此对象的实际宽度也要注意。

IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

　　（11）鼠标的手势也有问题：FireFox的cursor属性不支持hand，可是支持pointer，IE两个都支持；因此为了兼容都用pointer

　　（12）有个说法是：FireFox没法解析简写的padding属性设置。

如padding 5px 4px 3px 1px；必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px。但我试了一下，发现仍是能够解析的，难道是版本的缘由？

　 （13）消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效，padding属性对FireFox有效

　 （14）CSS控制透明度问题：通常就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60)

但在IE6下又有问题，因此又得弄成 filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

　　(15)有些时候图片下方会出现一条间隙，一般会出如今FF和IE6下面好比

<div><img src="1.jpg"/></div>

通常给img添加vertical-align属性便可，好比top middle
img{verticle-align:center;}

　(16)IE6下div高度没法小于10px

　　好比定义一条高2px的线条，FF和IE7都正常

　　但IE6就是10px

解决的办法有两种：添加overflow属性或设置fontsize大小为高度大小如：

<div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>

<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>