CSS兼容性汇总

最近更新时间：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的 右下角 边角样式

未完，待续……