最近更新时间：2017年5月24日15:43:10
随着现代浏览器发展速度太快，种类多，版本多，不同厂商浏览器或同一厂商不同版本的浏览器，对css的解析不同，以至于出现浏览器的渲染规范和css的渲染规范出现不兼容性，表现为同样的代码在不同浏览器下的显示效果出现差异化。但作为一款产品，必须要在不同设备上显示效果相同，因此，在css编码过程中需要加入兼容性代码。
在html文档的head标签中加入如下meta标签，对于360的双核浏览器，浏览器会自动启动webkit内核渲染：
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
IE=edge，使用最高界别模式显示内容
chrome=1，谷歌的外挂插件Google Chrome Frame（谷歌内嵌浏览器框架GCF），使用IE浏览网页时实际上是使用Chrome浏览器内核渲染，最低支持IE6，但前提是客户端已经安装GCF。
<meta name=”renderer” content=”webkit”>
这个meta标识是360独有识别的，搞定360绝大部分的兼容。
兼容性解决方案：
1、css hack
css hack，让css代码兼容IE浏览器，呈现出和其他厂商浏览器相同的UI界面。
方式一：条件注释法
<!–[if IE]>只在IE浏览器生效<![endif]–>
<!–[if IE] 6>只在IE6浏览器生效<![endif]–>
<!–[if gte IE 6]>只在IE6+浏览器生效<![endif]–>
<!–[if ! IE 8]>只在非IE8浏览器生效<![endif]–>
<!–[if ! IE]>只在非IE浏览器生效<![endif]–>
方式二：属性前缀法
*color:red;//IE7+的hack
+color:red;
-color:red;//IE6-的hack
_color:red;//IE6-的hack
#color:red;//IE6的hack
color:red\0;//IE8-10的hack
color:red\9;//IE6-10的hack
color:red\9\0;//IE9-10的hack
color:red !important;
书写顺序，其他浏览器的css写在前面，IE7写在中间，IE6写在最后面
方式三：选择器前缀法，假如要给#id1的元素写样式，如下，
*#id1{};//IE6的hack
*+#id1{};//IE7的hack
还有\0、\9、等
2、浏览器前缀写法
浏览器内核：IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-兼容模式Trident+极速模式Webkit
在css属性名称前加上浏览器前缀，即可实现属性的兼容性，兼容属性会被该浏览器识别并渲染出来；有浏览器前缀的css属性应该放在没有浏览器前缀的css属性之后，以保证hack起作用。
-webkit-（safari chrome）、
-moz-（Firefox）、
-ms-（IE）、
-o-（opera）；
css选择器使用注意事项：为保证兼容性，尽量不要使用太高级的选择器，比如,
p:first-of-type{};//选择每个p元素是其父级的第一个子元素
兼容性为，支持该属性选择器的第一个浏览器版本号，如下，
chrome 4+，IE 9+，firefox 3.5+，safiri 3.2+，opera 9.6+
css兼容性实例解决方案汇总：
1、父元素为flex属性，子元素为左固定宽，右自适应宽，但在IOS低版本系统中此布局失效，解决方案如下：
display: -webkit-flex; display: flex;
-webkit-flex-basis: 8.9rem; flex-basis: 8.9rem;
-webkit-flex-grow: 1; flex-grow: 1;
2、transform属性兼容性解决方案：
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
3、block元素手动设置为inline-block元素时，横向布局出现间隙
解决方案：设父元素font-size:0;
4、input元素的placeholder属性，IE6-9不支持
5、定制个性化滚动条
滚动条出现的条件：
一、文档内容高度/宽度 大于 浏览器的高度/宽度;
二、文档内元素人为设置固定宽高后，再设置属性overflow || overflow-x || overflow-y : scroll，即可出现滚动条效果;
由于不同内核浏览器的css hack不同，因此，针对不同内核浏览器有不同的解决方案，以<div class=”content”></div>元素为例，定制该元素的滚动条样式，水平方向禁止滚动，垂直方向可滚动：
<style>
.content{width:100px; height:50px; overflow-x:hidden; overflow-y:scroll}
</style>
weekit内核：以下选择器选择的内容，可理解为块级元素
.content::-webkit-scrollbar{width:2px; background:#fff}//设置 滚动条 整体的样式
.content::-webkit-scrollbar-thumb{background:#f00}//设置 滚动器 的样式
.content::-webkit-scrollbar-button{background:#0f0}//设置 滚动条 顶部和底部 的按钮样式
.content::-webkit-scrollbar-track{}//外层轨道 样式
.content::-webkit-scrollbar-track-piece{}//内层轨道 样式，不包括 滚动器 部分
.content::-webkit-scrollbar-corner{}//右下角 边角 样式
.content::-webkit-resizer{}//可缩放的.content的 右下角 边角样式
未完，待续……
