兼容性问题不完全记录

前端开发的朋友肯定遇到过不少兼容性问题，包括不同浏览器、不同设备、同一浏览器不同版本等等，这篇文章就用来记录我在日常开发中遇到过的一些兼容性问题，吃一堑长一智，同样的问题下次再遇到就能混个脸熟了。

样式

大部分情况其实都是样式兼容性问题，如果有不确定的样式，建议先去 caniuse 搜索一下，这个网站会详细列出你搜索样式的所有兼容情况。

flex 布局

现象：

使用 align-items: end 实现子元素底部对齐，Chrome 浏览器生效，Safari 不生效。

排查：

在 caniuse 网站中搜索该样式，发现 align-items 属性不仅用于 flex 布局，还可用于 grid 布局，而属性值 start 和 end 在 flex 布局中是不兼容 Safari 浏览器的，必须使用 flex-start 和 flex-end。

解决：

改为 align-items: flex-end 即可。

js

大家都知道 JavaScript 其实是由三部分组成：

• ECMAScript：由 ECMA-262 定义并提供核心功能；
• 文档对象模型(DOM)：提供与网页内容交互的方法和接口；
• 浏览器对象模型(BOM)：提供与浏览器交互的方法和接口。

ECMAScript 作为核心 API 本身是不存在兼容性问题的，只是它与 BOM 和 DOM 一样，不同浏览器对 API 的实现与支持有可能不同，因此就会导致兼容性问题的出现。

Date 格式化

现象：

在对日期进行格式化时，发现 Chrome 和 Safari 的表现不一样：

var date = new Date('2021-10-25 12:50');
console.log(date)
// Chrome ---> Mon Oct 25 2021 12:50:00 GMT+0800 (中国标准时间)
// Safari ---> Invalid Date

排查：

查阅 MDN 发现，在部分浏览器中所要解析的日期必须符合 ISO 8601 日期格式，显然 Safari 就是其中之一。在 Safari 中验证结果如下：

console.log(new Date('2021-10-25')) // Mon Oct 25 2021 08:00:00 GMT+0800 (CST)
console.log(new Date('2021/10/25')) // Mon Oct 25 2021 00:00:00 GMT+0800 (CST)
console.log(new Date('2021-10-25T12:50')) // Mon Oct 25 2021 12:50:00 GMT+0800 (CST)
console.log(new Date('2021-10-25T12:50Z')) // Mon Oct 25 2021 20:50:00 GMT+0800 (CST)
console.log(new Date('2021/10/25T12:50')) // Invalid Date
console.log(new Date('2021/10/25T12:50Z')) // Invalid Date
console.log(new Date('2021/10/25 12:50')) // Mon Oct 25 2021 12:50:00 GMT+0800 (CST)

解决：

采用了替换横杠为斜杠的方式：

var date = new Date('2021-10-25 12:50'.replace(/-/g, '/'))
console.log(date)
// Chrome ---> Mon Oct 25 2021 12:50:00 GMT+0800 (中国标准时间)
// Safari ---> Mon Oct 25 2021 12:50:00 GMT+0800 (CST)