chrome 120+ 移除 button 默认 margin，safari 16.6 前仍保留；统一方案是仅重置 margin: 0; padding: 0; border: none; font: inherit; line-height: normal。
Chrome 120+ 下 button 默认 margin 消失了，但旧版 Safari 还有——怎么统一？
这不是 bug，是浏览器逐步收敛默认样式的结果。Chrome 从 v120 开始移除了 button、input[type="button"] 等表单控件的 UA 默认 margin，而 Safari 16.6 之前仍保留（尤其 iOS 16.4 及更早）。直接写 margin: 0 会破坏部分安卓 WebView 的对齐逻辑。
- 用
all: unset太激进，会清掉display和box-sizing，必须手动补全 - 更稳妥的是只重置影响布局的属性：
margin: 0; padding: 0; border: none; font: inherit; line-height: normal; - 若项目需兼容 IE11，避开
all: unset，改用* { margin: 0; padding: 0; }+ 单独为button补vertical-align: middle;（IE 中默认 baseline 对齐易导致错位）
Firefox 的 input[type="number"] 上下箭头无法用 CSS 隐藏？
Firefox 不支持 appearance: none 或伪元素隐藏原生控件，且 ::-moz-number-spin-box 在 v91+ 已废弃。强行 display:none 会导致键盘上下键失效。
- 真正有效的方案是：用
appearance: textfield（Firefox 支持）+padding-right: 1rem避开原生区域 - 同时加
direction: rtl并反转文字方向（配合unicode-bidi: plaintext），可让箭头挤到左侧再用overflow: hidden切掉——仅限纯数字输入场景 - 若需保留增减功能，建议用自定义按钮 +
stepUp()/stepDown()JS 控制，而非强求隐藏
IE11 的 flex 布局塌陷：子元素 min-width: auto 导致换行异常
IE11 的 Flex 实现把 min-width: auto 解释成「内容最小宽度」，但实际渲染时会忽略 white-space: nowrap，导致长文本意外折行。这不是 CSS 规范问题，而是 Trident 引擎的计算缺陷。
- 给 flex 子项显式设
min-width: 0（不是min-width: unset，IE 不识别） - 若子项含内联元素（如
span），额外加max-width: 0; flex: 1;触发收缩行为 - 避免在 IE11 中对 flex 容器设
width: fit-content—— 它根本不支持，会退化为width: auto并引发父容器宽度误算
:focus-visible 在 Safari 15.4–16.3 中完全不触发？
Safari 在这个版本区间实现了 :focus-visible，但仅响应键盘 focus（Tab），对 JS .focus() 调用或点击后自动 focus 的 input 全部静默。这不是 polyfill 能绕过的底层限制。
- 检测是否可用：
if ('CSS' in window && CSS.supports('selector(:focus-visible)')) { ... }，但 Safari 15.4+ 返回 true 却不生效 - 降级策略：用
:focus:not(:focus-visible)+data-js-focus属性组合判断——点击时加属性，键盘操作时不加 - 别依赖它做关键可访问性提示；对
button等交互元素，始终保留:focus样式作为兜底
最麻烦的从来不是某个浏览器的 Bug，而是多个旧版本对同一规范的不同“理解”叠加在一起。比如一个 textarea 在 iOS 15.7 Safari 中要处理 resize 拖拽失灵，在 Chrome 115 Android WebView 中要防 font-size 缩放导致行高错乱，还得确保 IE11 下 placeholder 不覆盖内容——这些得拆开压测，不能靠一套 reset.css 一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
