浏览器兼容性

一份诚实的兼容说明

本站不打算向下兼容一切。 把这份清单放在这里， 是为了让每一次访问都心里有数。

最后更新 2026.06.29

总体结论

本站基于 Astro 6 构建，代码大量使用 ES2017+ 语法与现代 CSS 特性。 没有为 IE 系列、2018 年以前的浏览器做任何兼容处理， 也没有为旧系统专门适配。

如果你使用 近四年内（2022 年后） 发布的浏览器访问本站，体验是完整的； 否则可能出现版式错位、图缺失甚至脚本不工作的情况。

建议底线 Chrome 90+ / Edge 90+ / Firefox 88+ / Safari 15.4+

技术栈

  • Astro 6.4.2 静态站点框架
  • @astrojs/mdx 6.0.1 MDX 内容渲染
  • @astrojs/rss 4.0.18 RSS 订阅
  • @astrojs/sitemap 3.7.3 站点地图
  • sharp 0.34.3 图片处理
  • Node.js >= 22.12.0 构建期运行时（不影响浏览器）

未配置 browserslist / build.target，未引入 Babel、PostCSS、autoprefixer、core-js 等兼容工具。

浏览器支持矩阵

Chrome / Edge 90+ 2021 完全正常
Firefox 88+ 2021 完全正常
Safari 15.4+ / iOS 15.4+ 2022 完全正常
Safari 15.0 ~ 15.3 2021 :focus-visible 不生效
Safari 14.1 ~ 14.x 2021 aspect-ratio 不生效
Safari 14.0 及更早 ≤2020 gap / inset 失效，版式错乱
IE 11 / 旧 Edge Legacy ≤2020 变量 / gap / aspect-ratio / ES6+ 全部失效
Android WebView < 90 ≤2021 同 IE 11
Opera 76+ 2021 与 Chromium 同源
Samsung Internet 14+ 2021 Chromium 87+ 内核
UC / QQ / 360 等国内魔改浏览器 — 取决于其 Chromium 内核版本，建议升级到最新
Kindle / 旧版车载浏览器 — 不在支持范围

● 完全正常　◐ 局部异常　○ 不可用　? 取决于具体版本

HTML 与资源

图片格式 .webp

出现位置
public/images/**（artists / covers / movie）
支持起点
Safari 14.0+ / Chrome 32+ / Firefox 65+
影响
不支持的浏览器将看不到任何图片
建议
已修复：音乐页改用 <picture> + jpg 兜底；运行 node scripts/webp-to-jpg.mjs 生成 jpg

loading="lazy" 原生懒加载

出现位置
随笔正文、唠叨图片
支持起点
Safari 15.4+ / Chrome 76+ / Firefox 75+
影响
老浏览器会一次性加载全部图片，浪费流量
建议
影响极小，老浏览器仍能正常使用

内联 SVG（图标、返回箭头等）

出现位置
BlogPost.astro / about.astro / log 列表
支持起点
所有现代浏览器
影响
无
建议
无需处理

CSS 兼容

CSS 自定义属性（--var）

中等
支持起点
IE11 部分支持，Edge 15+ / Safari 9.1+ / Chrome 49+ 完整支持
影响
IE11 中 --font-size-base 等变量失效，回退到 initial 值

aspect-ratio: w / h

严重
支持起点
Safari 15.0+ / Chrome 88+ / Firefox 89+
影响
首页头图、随笔/唠叨配图会按原图比例撑开，破坏版式

flex gap

严重
支持起点
Safari 14.1+ / Chrome 84+ / Firefox 63+
影响
导航、列表项之间无间距，元素紧贴

inset: 0（top/right/bottom/left 简写）

中等
支持起点
Safari 14.1+ / Chrome 87+ / Firefox 66+
影响
灯箱遮罩定位失效

backdrop-filter: blur() saturate()

轻微
支持起点
Safari 9 起支持，但需要 -webkit- 前缀
影响
已修复：global.css 已补 -webkit-backdrop-filter 前缀，Safari 毛玻璃生效

:focus-visible

中等
支持起点
Safari 15.4+ / Chrome 86+ / Firefox 85+
影响
键盘用户失去焦点环，无障碍体验下降

font-variant-numeric: tabular-nums

轻微
支持起点
Safari 12.1+ / Chrome 52+ / Firefox 34+
影响
老版本数字不等宽，日期显示略有跳动感

自定义滚动条 ::-webkit-scrollbar

轻微
支持起点
所有 WebKit 内核
影响
Firefox / Edge Chromium 中样式不生效，使用默认滚动条

JavaScript 兼容

站点的所有交互（灯箱、代码块复制、唠叨加载更多、音乐年份切换等）均以 原生 ES2017+ 写在每个页面的 <script> 标签中， 没有走构建降级。

ES2015+ 语法（const / let / 箭头函数 / 模板字符串）

致命
支持起点
IE11 不支持，Edge 12+ / Safari 10+ / Chrome 51+ 支持
影响
IE11 下内联脚本直接抛 SyntaxError

async / await

致命
支持起点
IE11 不支持，Edge 14+ / Safari 10.1+ / Chrome 55+ 支持
影响
IE11 无法执行任何 .astro 中的 <script>

Array.from / Map / Set / Promise

致命
支持起点
IE11 不支持
影响
同 ES6

可选链 ?.

严重
支持起点
Chrome 80+ / Safari 13.1+ / Firefox 74+
影响
老版本将抛语法错误

navigator.clipboard.writeText()

中等
支持起点
Chrome 66+ / Safari 13.1+ / Firefox 63+；且需 HTTPS 或 localhost
影响
复制按钮在老浏览器 / 非 HTTPS 环境下静默失败

document.querySelectorAll / addEventListener

无影响
支持起点
IE9+ 起支持
影响
无

classList.add / remove / toggle

轻微
支持起点
IE10+ 起支持
影响
IE9 不支持（已极小众）

字体与性能

@font-face 加载 13 个 OTF 字重

影响
单家族 4–6 MB，首屏等待时间长
建议
已使用 font-display: swap 优先显示系统字体；可考虑按页拆分字重、按需加载

回退栈 -apple-system, BlinkMacSystemFont, "Segoe UI", serif

影响
字体未加载完成时各平台显示不同的系统字体
建议
无需处理

降级与建议

  1. 01

    ✅ 已完成：补 -webkit- 前缀

    成本 · 1 行

    已为 backdrop-filter 补 -webkit-backdrop-filter，Safari 毛玻璃生效。

  2. 02

    ✅ 已完成：webp → picture 兜底（音乐页）

    成本 · 运行 node scripts/webp-to-jpg.mjs

    music/index.astro 中歌手头像与歌曲封面已用 <picture> 包裹并指向同名 .jpg；scripts/webp-to-jpg.mjs 一键生成所有 jpg 兜底。

  3. 03

    低成本：aspect-ratio padding-top 兜底

    成本 · 数行 CSS

    为关键容器额外提供 padding-top: 56.25%（16:9）类回退样式。

  4. 04

    低成本：focus-visible 退回 :focus

    成本 · 数行 CSS

    在不支持的浏览器中通过 :focus 兜底焦点环。

  5. 05

    中成本：Vite 降级 + babel

    成本 · 配置 + 集成

    在 astro.config.mjs 中配置 build.target / vite.build.target 调整 ES 版本；如需 IE11 需加 @vitejs/plugin-legacy。

  6. 06

    中成本：core-js 按需 polyfill

    成本 · 依赖 + 引入

    为 async / 可选链 / Map 等手动引入 core-js，按需减小体积。

  7. 07

    完整方案：legacy 插件链

    成本 · 一次性配置

    @vitejs/plugin-legacy + core-js + terser，自动产出 ES5 兜底脚本。

老系统的处理

Windows XP / Vista / 7
最高仅能运行到 Chrome 109（Win7 最后支持版本）。 现代 Edge、Firefox ESR 已不再支持这些系统。 本站可访问但部分特性（backdrop-filter、focus-visible、动态加载）表现不一致。
Windows 8.1
Edge Legacy 仅支持到此系统。推荐改用 Chrome / Firefox 最新版。
macOS 10.13 High Sierra 及更早
Safari 12 及更早无法支持本站。可改用 Chrome / Firefox。
iOS 12 及更早
WebKit 内核固定，无法升级。Safari 12 缺 gap / aspect-ratio， 部分页面图片会撑破版式。建议升级 iOS 或改用现代设备。
Android 7 及更早
WebView 版本普遍低于 80，缺大量现代 API。 本站可勉强访问文字内容，图片、交互基本不可用。
Linux 发行版自带的旧版 Firefox
部分发行版默认安装 ESR 60/68。请手动升级到 Firefox 88+。

把页面的复杂度留给愿意升级的人， 把页面的耐心留给愿意回来的人。