5.1-浏览器的兼容
Create by fall on 24 Nov 2021 Recently revised in 07 Apr 2023
可在该文章内查看浏览器兼容的详情：浏览器的兼容问题及解决方案整理（建议收藏）
浏览器的前缀
css3 去兼容不同的浏览器时，需要添加不同的前缀
| 浏览器 | 内核 | 前缀 |
|---|---|---|
| IE | Trident | -ms- |
| Firefox | Gecko | -moz- |
| Opera | Presto | -o- |
| Chrome | wibkit | -wibkit- |
| Safari | wibkit | -wibkit- |
| Opera | Chrome | Blink |
IE 兼容
IE 已经在 2022 年 6 月 15 日正式停用，不再进行维护
CSS属性前缀法
| 前缀标识 | 兼容浏览器 |
|---|---|
| _ | IE6 |
| +、* | IE6、IE7 |
| \9 | IE6、IE7、IE8、IE9 |
| \0 | IE8、IE9、IE10、IE11 |
示例：.elem{_background:blue} // 对IE6 进行兼容
选择器前缀法
| 前缀标识 | 兼容浏览器 |
|---|---|
| *html | IE6 |
| *+html | IE7 |
| :root | IE9及现代浏览器 |
示例：
*html .box{background:blue} // 对IE6进行兼容
IE条件注释法(IE10 以上已经不支持)
将注释书写在<body>标签中，是官方推荐的做法
| 前缀标识 | 兼容浏览器 |
|---|---|
<!--[if IE]-->...<!--[end if]--> | IE |
<!--[if IE7]-->...<!--[end if]--> | IE7 |
<!--[if lte IE7]-->...<!--[end if]--> | IE7以下 |
<!--[if !IE 7]-->...<!--[end if]--> | 非IE7 |
IE低版本常见bug
- 透明度
- 双边距
- 最小高度
- 图片边框
渐进增强和优雅降级
- 渐进增强 : 首先实现低级浏览器的基本框架和功能，然后通过高级浏览器设计出更加高级的浏览器效果进一步提升效果以及交互式体验，达到更好的用户体验。
- 优雅降级 : 首先实现高阶浏览器的功能，然后根据低阶浏览器的兼容性采取手段，使在低阶浏览器也能访问。
使用插件兼容
对于 CSS 来说，进行兼容就是使用 postcss 工具，实现添加浏览器前缀，以兼容不同的浏览器
参考文章
| 作者 | 文章名称 |
|---|---|
| 去追光 | 浏览器的兼容问题及解决方案整理（建议收藏） |