最近更新时间：2017年5月24日15:43:10css
《个人博客地图》html
随着现代浏览器发展速度太快，种类多，版本多，不一样厂商浏览器或同一厂商不一样版本的浏览器，对css的解析不一样，以致于出现浏览器的渲染规范和css的渲染规范出现不兼容性，表现为一样的代码在不一样浏览器下的显示效果出现差别化。但做为一款产品，必需要在不一样设备上显示效果相同，所以，在css编码过程当中须要加入兼容性代码。web
在html文档的head标签中加入以下meta标签，对于360的双核浏览器，浏览器会自动启动webkit内核渲染：chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">浏览器
IE=edge，使用最高界别模式显示内容框架
chrome=1，谷歌的外挂插件Google Chrome Frame（谷歌内嵌浏览器框架GCF），使用IE浏览网页时其实是使用Chrome浏览器内核渲染，最低支持IE6，但前提是客户端已经安装GCF。
ide
<meta name="renderer" content="webkit">布局
这个meta标识是360独有识别的，搞定360绝大部分的兼容。
flex
兼容性解决方案：ui
一、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、\九、等
二、浏览器前缀写法
浏览器内核：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兼容性实例解决方案汇总：
一、父元素为flex属性，子元素为左固定宽，右自适应宽，但在IOS低版本系统中此布局失效，解决方案以下：
display: -webkit-flex; display: flex;
-webkit-flex-basis: 8.9rem; flex-basis: 8.9rem;
-webkit-flex-grow: 1; flex-grow: 1;
二、transform属性兼容性解决方案：
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
三、block元素手动设置为inline-block元素时，横向布局出现间隙
解决方案：设父元素font-size:0;
四、input元素的placeholder属性，IE6-9不支持
五、定制个性化滚动条
滚动条出现的条件：
1、文档内容高度/宽度 大于 浏览器的高度/宽度;
2、文档内元素人为设置固定宽高后，再设置属性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的 右下角 边角样式
未完，待续……