::file-selector-button 在 Chrome、Edge 110+ 和 Safari 15.4+ 中可用，Firefox（含 128.x）及 IE、旧 WebView 均不支持，需降级为隐藏 input + label 模拟；Safari 盒模型默认 content-box，须显式设 box-sizing: border-box；Chrome/Edge 字体继承异常，应显式声明 font-family；IE 及旧 WebView 完全无视该伪元素，且 input 必须在文档流中才生效。
::file-selector-button 在 Chrome、Edge 110+ 和 Safari 15.4+ 中可用，Firefox 目前（2026年7月）仍不支持——这意味着你无法靠它统一控制 Firefox 的文件按钮样式，必须准备降级方案。
Firefox 不支持 ::file-selector-button 的现实应对
目前所有稳定版 Firefox（包括 128.x）均未实现该伪元素，::file-selector-button 规则会被直接忽略。这不是 bug，而是标准落地进度问题。
- 不要用
@supports (::file-selector-button)做功能检测——它在 Firefox 中永远返回 false，且无法 fallback 到其他逻辑 - 若需兼容 Firefox，必须保留传统隐藏
<input type="file">+<label>模拟的结构 - 可借助特性检测库（如 modern-normalize 或自定义 JS）判断是否支持，再动态切换 DOM 结构或 class
::file-selector-button 在 Safari 中的盒模型陷阱
Safari 对该伪元素的默认 box-sizing 解析仍沿用 UA 样式（content-box），即使你写了全局 * { box-sizing: border-box }，它也无效。
- 必须显式声明：
::file-selector-button { box-sizing: border-box; } - 否则设置
width: 100%+padding时，实际宽度会超出父容器（内容宽 + 内边距） - 同理，
height配合line-height或padding时容易错位，建议统一用min-height+padding+display: flex居中
Chrome/Edge 下文字截断与字体继承异常
Chrome 和 Edge 中，::file-selector-button 默认继承父 <input> 的字体设置，但部分字体（如系统中文 UI 字体）会导致按钮内文字换行或溢出，尤其在窄容器中。
立即学习“前端免费学习笔记（深入）”；
- 务必显式设置：
::file-selector-button { font-family: system-ui, -apple-system, sans-serif; } - 避免依赖
inherit，因为<input type="file">的 UA 字体链在各浏览器中差异极大 - 若需隐藏“选择文件”文字（只留图标），不能只设
font-size: 0——Safari 会连图标一起压扁；推荐text-indent: -9999px+overflow: hidden，再用::before插入 SVG
IE 和旧 WebView 完全不识别该伪元素
IE 11 及更早版本、Android 4.4 WebView、iOS 14.5 以下 Safari 全部无视 ::file-selector-button，连语法都不解析。
- 不要试图加
-webkit-::file-selector-button前缀——无意义，该伪元素无厂商前缀变体 - 降级逻辑必须前置：用
document.createElement('input').accept等简单特性检测，而非依赖 CSS 支持度 - 真正麻烦的是 Android 旧 WebView：它可能渲染出两个按钮（原生 + 伪元素），此时需用
input[type="file"]::-webkit-file-upload-button覆盖旧样式，再用 JS 移除冗余节点
最易被忽略的一点：伪元素样式生效的前提是 <input type="file"> 必须在文档流中（不能 display: none 或 visibility: hidden），否则 Safari 会跳过渲染整个伪元素树——哪怕它语法合法、支持良好。
