常见兼容问题积累

常见兼容性问题积累

1.使用Babel，部分ES6语法不进行编译问题

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。Babel 默认不转码的 API 非常多，详细清单可以查看
definitions.js查看

后台类为方便使用可以引入polyfill进行兼容

$ npm install -save-dev babel-polyfill

在Js中

import 'babel-polyfill';

---

2.css-margin外边距合并问题

经典的外边距问题

问题及分析

w3c简单讲解
深入理解BFC和外边距合并

解决方案

1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）

2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠）

我们都知道触发BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）

来源：知乎

最后看下贺大师的回答

我想说，这其实并不（只）是一个技术问题，而是一个设计问题。你应该去问一下，为什么这里上下是margin？设计师在这里表达的是什么？是否真的应该用margin而不是padding或者border？

---

3.圆角矩形背景会被渲染的问题：

问题：

有些低版本安卓手机出现在圆角之外仍然渲染了背景颜色的情况，而且这种情况的出现和box-sizing的设置无关

解决办法：

给添加border-radius的元素添加 background-clip:padding-box 只渲染padding以内的区域

---

4.top值为百分数设置位置失效的问题：

问题：当top采用百分数为单位去设置位置的时候，某些手机top值会失效

解决办法：因为top值是相对于父级高度去计算的，如果父级高度是自动由内容撑开的话，有的手机是计算不出来的，因此需要给定位元素父级设置高度

---