【CSS】兼容处理

兼容查询

工具网站：https://www.caniuse.com，查询样式在各个浏览器的兼容情况，从而选择更合适的方案

1.在横线处输入需要查询兼容性的样式属性

2.查看下方浏览器兼容表

表头为不同的浏览器名称，主要查看 IE、Edge、Firefox、Chrome、Safari、Opera这几个主流浏览器的兼容情况。倒数第二行是当前用户主流浏览器版本，为主要兼容参考，一般我们只看倒数三行的兼容情况；红色标签代表完全不兼容，绿色标签代表完全兼容，棕色标签代表兼容但需要加兼容方案 (右上角有白色数字图标，表示兼容方案；左上角有黄色图标，表示会提示添加对应的兼容前缀；鼠标移入效果 )

-XXX-兼容 ( 不同内核的浏览器 )

不同浏览器因为内核不同，针对同一条css属性的兼容支持程度也不同，可通过加兼容前缀的方式，让一些标准样式在浏览器内可以使用 ( 如果css样式在主流浏览器中需要加兼容前缀才能生效，就先写兼容写法，最后写标准写法 )

.mask-image{
		-webkit-mask-image: var(--mask);
		-moz-mask-image: var(--mask);
		mask-image: var(--mask);
}

关于chrome浏览器内核小知识： chrome的内核确切的说是Chromium引擎，它是使用苹果公司的WebKit作为浏览器内核原型，是WebKit内核的一个分支。Chromium引擎虽然是属于WebKit的分支，却把WebKit的代码梳理得可读性提高很多，因此Chromium引擎和其它基于WebKit的引擎所渲染页面的效果也是有出入的。基于以上原因，有的地方会把Chromium引擎跟WebKit区分开来，有的地方则直接把Chromium引擎归为WebKit都是可以的

关于国内浏览器内核小知识： 国内浏览器内核基本为webkit内核或chromium引擎内核拼接Edge 或 IE内核形成；比如360浏览器就有内核切换模式，针对css属性规则上都直接沿用了webkit内核规则，所以国内开发以Chrome为开发浏览器也是考虑这层原因

兼容前缀	内核	针对的浏览器
-webkit-	WebKit‌ 内核	Chrome 、Safari 、 Android Browser
-moz-	Gecko‌ 内核	Firefox
-ms-	‌Trident‌ 内核	IE 、Edge
-o-	‌Presto‌ 内核	Opera

META兼容 ( meta强制解析模式 )

x-ua-compatible 用来指定IE浏览器解析编译页面的model，头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其它 meta 之前使用；renderer 用来指定渲染内核

1）使用一行代码来指定浏览器使用特定的文档模式

<meta http-equiv="x-ua-compatible" content="IE=9" >
<meta http-equiv="x-ua-compatible" content="IE=8" >
<meta http-equiv="x-ua-compatible" content="IE=7" >

2）在某些情况下，需要限定浏览器对文档的解析到某一特定版本，或者将浏览器限定到一些旧版本的表现中

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

<!-- 使用这种写法，浏览器或者使用标准模式进行解析，或者使用 IE5 Quirks 模式进行解析 -->

3）为了测试，也可以使用下面的语句指定浏览器按照最高的标准模式解析页面

<meta http-equiv="x-ua-compatible" content="IE=edge" >

4）多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个它所支持的最高版本来使用标准模式进行渲染

<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
	
<!-- 如果在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为它本身不支持IE9和IE10 -->

5）当指定的content值为IE=Edge, chrome=1时，假定客户端安装了Google Chrome Frame插件，则在IE中使用chrome的渲染引擎来渲染页面，否则将会使用客户端IE最高的标准模式对页面进行渲染

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

<!-- 
	如果存在客户端Chrome Frame并启用，那么浏览器访问页面会被Chrome内核渲染（这一点没太大意义，因
	为你开发的项目不能要求用户在客户端来安装Chrome Frame）；也就是说IE浏览器变身Chrome是可以的，
	但前提是客户端安装了Chrome Frame使用IE内核浏览器来访问，会渲染至该浏览器的最高版本；比如你使
	用IE9浏览器，那么就算在兼容模式切换至IE7，但仍会渲染成IE9的样子；目前最实用的最新写法
-->

6）对多核浏览器 ( 360 \ 搜狗 ) 等进行强制指定渲染内核 ( http://se.360.cn/v6/help/meta.html )

<!-- 页面需默认用极速核 -->
<meta name="renderer" content="webkit">
<!-- 页面需默认用ie兼容内核 -->
<meta name="renderer" content="ie-comp">
<!-- 页面需默认用ie标准内核 -->
<meta name="renderer" content="ie-stand">

<!-- content的取值为webkit，ie-comp，ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核 -->

HACK兼容 ( 老版本IE6 7 8 9浏览器 )

关于CSS hack ( 尽量不用或者少用，减少页面复杂度 )，应该首先尝试使用标准的CSS技术来解决问题

1）条件注释法 ( 只有 Internet Explorer (IE) 能识别的特殊注释语法 )

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-styles.css" />
<![endif]-->

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-below-styles.css" />
<![endif]-->

2）选择器前缀法

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

3）属性前缀法

.example {
	 background-color:red; /* 所有浏览器 */  
    background-color:blue !important; /* 除了ie6的浏览器 */  
    *background-color:black; /* IE6, IE7 */  
    +background-color:yellow; /* IE6, IE7*/  
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
    background-color:purple\0; /* IE8, IE9, IE10 */  
    background-color:orange\9\0; /* IE9, IE10*/  
    _background-color:green; /* 只有IE6生效 */  
    *+background-color:pink; /*  只有IE7生效 具体小版本有差别 */  
}

参考网址:
(1) https://juejin.cn/post/7391744486978011186#heading-3
(2) https://swordair.com/tools/css-hack-table/
(3) https://www.cnblogs.com/lianchenxi/p/9311401.html

常见问题

>  不同浏览器的标签默认的内外边距不同

解决方案：*{margin: 0; padding: 0;}

>  IE6不支持min-height属性

解决方案：{min-height: 200px; _height: 350px;}

>  IE9以下浏览器不能使用opacity

解决方案：Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter

opacity: 0.7; /* Ff chrome safari opera */
filter: alpha(opacity:70); /* 用了ie滤镜,可以兼容ie */

>  cursor:hand 显示手型在 safari 上不支持

解决方案：统一使用{cursor: pointer;}

>  table宽度固定，td自动换行

解决方案：table设置 {table-layout: fixed}，td设置 {word-wrap: break-word}

>  IE中li指定高度后，出现排版错误

解决方案：设置line-height

>  ul设置float后，在IE中margin将变大

解决方案：*margin: 5px; /* 仅IE识别，调整为适合的值 */