CSS兼容性汇总

短命女 2022-09-27 15:23 271阅读 0赞

*最近更新时间：2017年5月24日15:43:10*

[《我的博客地图》][Link 1]

随着现代浏览器发展速度太快，种类多，版本多，不同厂商浏览器或同一厂商不同版本的浏览器，对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界面。

方式一：条件注释法

方式二：属性前缀法

\*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的 右下角 边角样式

未完，待续……

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端开发兼容性问题汇总

*最新更新时间：2019年09月07日13:27:20* [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：移动端开发兼容性问题...

冷不防/ 2024年04月18日 13:30/ 0 赞/ 102 阅读

相关 ie浏览器兼容性问题汇总

1、去掉箭头函数可处理 2、ie8不能使用every语句可处理 3、去掉最后一个逗号，ie最后一个不能加逗号。可处理 4、ie8不能使用forEach兼容

秒速五厘米/ 2023年07月25日 11:16/ 0 赞/ 38 阅读

相关 css hack--浏览器兼容性问题

css hack–浏览器兼容性问题写css样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即css hack，不同的浏览器对css的解析结果是不同的，因此会导致相

雨点打透心脏的1/2处/ 2022年10月01日 13:49/ 0 赞/ 279 阅读

相关 CSS兼容性汇总

最近更新时间：2017年5月24日15:43:10 [《我的博客地图》][Link 1] 随着现代浏览器发展速度太快，种类多，版本多，不同厂商浏览器或同一厂商不同版

短命女/ 2022年09月27日 15:23/ 0 赞/ 272 阅读

相关浏览器兼容性问题汇总及解决方案

最近一直在调测系统在各个浏览器的兼容性问题，真是让人抓狂啊，我最爱的Firefox竟然还是出问题最多的，好伤心……把碰到的问题和查到的一些资料总结一下写在这里，一方面方便自己以

深碍√TFBOYSˉ_/ 2022年07月29日 11:19/ 0 赞/ 580 阅读

相关 CSS常见兼容性问题总结

本文有部分是从别的大神博客看来的，有部分是自己平时遇到的，一并写下来，当然肯定是不全的，欢迎大家补充 1、首先是div居中问题，通常写法为 <!DOCTYPE h

悠悠/ 2022年07月12日 03:27/ 0 赞/ 277 阅读

相关 CSS中浏览器兼容性问题

1、条件注释法  2、类内属性前缀法 “-″减号是IE6专有的ha

谁践踏了优雅/ 2022年06月09日 11:10/ 0 赞/ 344 阅读

相关 CSS常见兼容性问题总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE… FireFox Chrome

女爷i/ 2022年04月17日 02:46/ 0 赞/ 323 阅读

相关 css 颜色渐变兼容性

参考文献：http://caibaojian.com/css3-background-gradient.html 　　　　 https://www.cnblogs.com

旧城等待，/ 2021年12月16日 15:41/ 0 赞/ 390 阅读

相关常见的浏览器兼容性问题大汇总

1 ie6.0横向`margin`加倍产生因素：块属性、float、有横向margin。解决方法：display：inline； 2 ie6.0下默认有

心已赠人/ 2021年06月26日 16:06/ 0 赞/ 555 阅读