CSS兼容问题（PC端）.

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

一、起因.

浏览器不同
- IE
- FireFox
- Chrome
- Opera
- Safari
- 。。。
浏览器版本不同
- IE6 IE7 。。。
- IE9 。。。（遵循W3C规范，之前不遵循，其他浏览器遵循，所以说主要兼容来自IE9版本之前的IE浏览器）

二、CSS Hack.

为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫CSS Hack

简单理解，根据不同浏览器/版本写样式

1.IE条件注释法.

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

<!-- 小于等于IE8 识别内容 -->
<!--[if lte IE8]>
    想要执行的代码
<![endif]-->

2.CSS属性前缀法.

给CSS的属性添加前缀。

*可以被IE6/IE7识别

_只能被IE6识别

IE6~IE10可以识别 \9

IE6不能识别 !important

FireFox不能识别 * _ \9

在标准模式下

“ _ “ IE6专有的Hack
“ \9 “ IE6~IE10 都生效
“ \0 “ IE8~IE10 都生效
“ \9\0 “ IE9/IE10

<style>
    h1 {
        color: #111; /* all */
        color: #222\9; /* IE */
        *color: #333; /* IE6/IE7 */
        _color: #444; /* IE6 */
    }
</style>

IETester软件

测试IE兼容性

3.选择器前缀法.

IE6/IE7可识别 *div{}
IE7可识别 *+div{}
@media screen\9{} IE6/IE7
@media \0screen{} IE8
@media \0screen,screen\9{} IE6/IE7/IE8
@media screen\0{} IE8/9/10
@media screen and (min-width: 100px\0){} IE9/10
。。。

三、浏览器私有属性.

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

书写要求：标准写在最后，兼容性写在前面

-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transforn:rotate(-3deg);
-o-transforn:rotate(-3deg);
transforn:rotate(-3deg);

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

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

彼得朱链接：https://www.jianshu.com/p/a6f52fe96e6e

四、浏览器样式初始化.

解决不同浏览器/版本代码解析效果不同 – 把默认样式归零

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;
} /* *{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;
}

可以使用 Normlize.css达到初始化效果

Normalize.css 使浏览器呈现所有 HTML 元素更加一致，并且符合现代 web 标准。Normalize.css 只作用于需要规范化的样式。

<!-- 非压缩 -->
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css" rel="stylesheet">
<!-- 压缩 -->
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">