CSS兼容问题

2019-07-16 本文已影响0人彼得朱

[TOC]

1、起因

浏览器兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

这里谈到的浏览器，主要指IE6/IE7/IE.....FireFox、chrome、Opera、Safari。但更多的兼容还是考虑IE6/IE7/IE8/IE....之间的斗争

2、CSS Hack

我们为了让页面形成统一的效果，要针对不同的浏览器/版本而写css的过程就叫做CSS hack

(1)IE条件注释法

即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才会执行里面的代码。

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

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

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

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

<!--示例1-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="base.css"/>
<![endif]-->

1.png

2.png

(2)CSS属性前缀法

即给css的属性添加前缀，比如*可以被IE6/IE7识别，但_只能被IE6识别，IE6-IE10都可以识别"\9"，IE6不能识别！important ，Firefox不能识别 * _ \9

说明：

在标准模式中

"-" 减号是IE6专有的hack

"\9" IE6-IE10 都生效

"\0" IE8-IE10 都生效，是IE8-IE10的hack

"\9\0" 只对IE9-IE10 生效

<!--示例2-->
        <style>
            h1{
                color: #FF0000;     /* all */
                color: #222\9;   /* IE */
                *color: #333;    /* IE6/IE7 */
                _color:#444;     /* IE6 */
            }
        </style>

3.png

4.png

5.png

6.png
IEtester：http://www.ietester.cn/ 测试兼容的

(3)选择器前缀法

IE6 可识别 *div{color:red}

IE7 可识别 *+{color:red}

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

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

。。。。。

<!--示例3-->
        <style>
            *h2{
                color:orange;
            }
        </style>

3、浏览器私有属性

-moz 代表Firefox浏览器私有属性
-ms 代表IE浏览器私有属性
-webkit 代表chrome、Safari私有属性
-o 代表Opera私有属性

注意：对于私有属性，要把标准写法放到最后，兼容性写法放到前面

我们经常会在某个CSS的属性前添加一些前缀，比如：-webkit-，-moz-，-ms-，这些就是浏览器的私有属性。

为什么会出现私有属性呢？这是因为制定HTML和CSS标准的组织w3c动作是很慢的。

通常，有W3C组织成员提出一个新属性，比如说圆角border-radius，大家都觉得很好，但w3c制定标准，要走很复杂的程序、审查等，而浏览器市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。
但是为避免日后w3c公布标准时有所变更，会加入一个私有前缀，比如 -webkit- border-radius，通过这种方式来提前支持新属性，等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。

<!--示例4-->
.box{
                width: 300px;
                height: 300px;
                -webkit-border-radius: 150px;
                -moz-border-radius: 150px;
                -ms-border-radius:150px;
                -o-border-radius: 150px;
                border-radius: 150px;
                background-color: royalblue;
            }

4、浏览器CSS样式初始化

针对不同浏览器渲染效果的不同，可以进行浏览器css样式初始化，也就是加一个reset.css文件

/*淘宝的reset.css*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}
body,button,input,select,textarea { font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}
h1,h2,h3,h4,h5,h6 {font-size:100%}
address,cite,dfn,em,var {font-style:normal}
code,kbd,pre,samp {font-family:courier new,courier,monospace}
small {font-size:12px}
ol,ul {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}