Firefox 对原生表单元素（如 ）应用了未显式声明的默认边框样式，导致在 flex 布局中因 sub-pixel 计算和重排触发 box-shadow 渲染错位；显式设置 border 可强制统一渲染基准，彻底解决偏移。
firefox 中 box-shadow 偏移问题的根源与解决方案：firefox 对原生表单元素（如 ``）应用了未显式声明的默认边框样式，导致在 flex 布局中因 sub-pixel 计算和重排触发 box-shadow 渲染错位；显式设置 `border` 可强制统一渲染基准，彻底解决偏移。
在响应式 Flex 布局中为表单控件添加 box-shadow 用于视觉反馈（如校验高亮）时，你可能会遇到一个 Firefox 特有的渲染异常：当相邻容器因 :hover 动态展开、字体缩放或窗口缩放引发高度微调（尤其是使用 em/rem 等相对单位时），下方 <input> 元素的 box-shadow 会短暂或持续地发生 1px 级别的垂直或水平偏移——即使元素自身位置未变，阴影却“漂移”了。该问题在 Chrome 中不可复现，是 Firefox 渲染引擎对原生表单元素默认样式的处理差异所致。
根本原因在于：Firefox 为 <input> 默认注入了隐式、非标准化的 border（通常为 1px inset 或类似系统主题样式），而该边框在布局计算中参与盒模型尺寸推导，但其像素对齐逻辑与 box-shadow 的渲染坐标系不完全同步。当父容器因 em 高度、line-height、滚动条出现或 resize 触发 sub-pixel 重排时，Firefox 可能对边框的亚像素渲染产生浮动误差，进而导致 box-shadow 的锚点发生微偏。
✅ 可靠且无副作用的解决方案：显式声明 border 样式。这会覆盖浏览器默认边框，使盒模型尺寸确定、渲染基准统一，并消除 sub-pixel 对齐不确定性。
.input-part > input {
flex: 0 0 50%;
box-shadow: 0 0 1px 1px red;
/* 关键修复：显式设置 border */
border: 1px solid #aaa;
/* 可选：保持视觉简洁 */
background-color: #fff;
}
⚠️ 注意事项：
- 不必将所有
em/rem单位转为px—— 本方案完全兼容响应式排版，border使用px是安全的（1px 边框在任意缩放下均清晰稳定）； - 若需保留“无边框”视觉效果，可用
border: 1px solid transparent，但需验证是否仍触发问题（部分 Firefox 版本对transparent边框处理不一致，推荐使用浅灰等可见色）； - 避免仅依赖
outline替代box-shadow，因其不参与文档流，无法实现精确外扩高亮； - 此问题在 Firefox ≥124 中仍存在，属已知渲染差异（非 bug），Mozilla 官方建议通过显式样式归一化规避。
? 总结：这不是布局逻辑错误，而是浏览器样式层的隐式行为冲突。为任何使用 box-shadow 的表单元素显式设置 border，是最小侵入、最高兼容、最易维护的实践规范——它既修复了 Firefox 的阴影偏移，也提升了跨浏览器样式一致性，同时不影响响应式设计目标。
