苹果CMS Edge浏览器适配全攻略 搞定排版错乱兼容性问题

为啥Edge偏偏跟你的苹果CMS站过不去？

你有没有发现自己折腾的苹果CMS站，别的浏览器都好好的，一用Edge打开要么导航栏飞了，要么播放器加载不出来，甚至整个页面乱成一锅粥？很多站长都觉得是Edge抽风，实则是你没踩对适配的坑。

说白了现在Edge用的也是Chromium内核，按理说跟Chrome兼容性差不多，但架不住Edge自带的一堆默认设置，还有苹果CMS老模板里残留的IE专属兼容代码，俩撞一起就出问题。还有很多老模板里的js判断，只认Chrome、Firefox，碰到Edge的ua标识直接判定成未知浏览器，不给加载对应资源，这不乱才怪。

核心适配操作，跟着改完99%的问题都能消

先把UA判断的坑填上

别再用老掉牙的浏览器判断代码了，现在Edge的ua里带Edg字段，直接给加上就行。很多播放器加载失败、功能点不开的问题，都是这一步没做到位导致的。

```js // 新增Edge浏览器判断逻辑 const ua = navigator.userAgent.toLowerCase() const isEdge = ua.indexOf('edg') > -1 const isChrome = ua.indexOf('chrome') > -1 && !isEdge // 后续资源加载逻辑统一适配Chromium内核浏览器 if(isChrome || isEdge){ // 加载你原先给Chrome用的播放器、样式资源就行 } ```

改完这个你先刷新试试，十有八九播放器加载失败的问题直接就解决了。

样式适配要注意这两个Edge专属默认值

很多人忽略了Edge默认的表单样式、滚动条样式跟别的Chromium浏览器不一样，还有个更坑的，就是Edge自带的“效率模式”，会自动冻结后台标签页的js定时器，很多苹果CMS的自动刷新、连载更新提醒功能出问题，都是这个搞的鬼。

给全局css加这两段重置代码，就能解决90%的样式错乱问题：

```css / 重置Edge默认样式 / { margin: 0; padding: 0; box-sizing: border-box; } / 禁用Edge自动填充的黄色背景 / input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px fff inset !important; } ```

至于效率模式的问题，你没法改用户的浏览器设置，但可以加个小提示，用户打开Edge访问的时候，要是检测到定时器被冻结，弹个提示让用户把站点加入效率模式白名单就行，不是啥大问题。

静态资源缓存坑一定要避

你有没有发现改完代码刷新Edge，页面还是老样子？别怀疑自己改漏了，是Edge的缓存机制比别的浏览器狠多了，尤其是苹果CMS默认的静态资源缓存规则，经常跟Edge的缓存逻辑撞车。

直接在苹果CMS后台的站点设置里，给静态资源url加个版本号参数，比如你原来的css引用是/theme/default/css/style.css，改成/theme/default/css/style.css?v=20240520，每次更新资源改下后面的版本号，Edge就会老老实实拉新资源，不会再给你用旧缓存了。

适配完记得做这两步验证

别改完就觉得万事大吉了，先开Edge的无痕窗口测一遍，避免本地缓存干扰结果，还要把Edge的效率模式、广告拦截插件都开着测，毕竟普通用户都是默认开这些的，你自己测的时候关了插件没问题，用户打开还是乱，那不白折腾。

哦对了，还要测下移动端的Edge，现在不少人手机也用Edge，别只测桌面端漏了移动端的坑。

其实苹果CMS适配Edge真没你想的那么难，大部分坑都是老模板遗留的历史问题，不用大动干戈改整个模板，把这几个核心点改完，基本就能覆盖99%的用户场景了，省得一堆用户跑过来反馈站在Edge里用不了，你还一脸懵不知道咋回事。