safari中box-sizing看似生效实则失效的主因是transform/filter/滚动容器组合导致尺寸计算被截断或延迟，而非box-sizing本身问题；-webkit-box-sizing无效，需全局覆盖伪元素并排查第三方重置、all:unset干扰及图层合成截断。
根本原因不是盒模型本身变了，而是 Safari 的渲染链路在特定组合下会跳过尺寸修正逻辑——尤其是 box-sizing 遇上 transform、filter 或滚动容器时，子项尺寸计算可能被截断或延迟。
box-sizing: border-box 在 Safari 里“看似生效”但实际没起作用
Safari 从 5.1 起就原生支持无前缀 box-sizing: border-box，写 -webkit-box-sizing 不仅无效，还会让样式表多一次无意义解析。但问题常出在覆盖上：
- 第三方组件（如 Ant Design、Element Plus）的局部重置可能漏掉伪元素或深层子项，DevTools 的「Computed」里看到的是继承值而非真实声明值
- 用了
all: unset或revert后，box-sizing会被重置为content-box，且不报错 - iOS Safari 对
min-width: 0的解析有延迟，尤其嵌套了display: flex的子项，仍按min-content计算宽度
transform + filter 组合触发图层合成截断
这不是盒模型 bug，而是 Safari 渲染引擎的图层策略：当元素同时有 filter: drop-shadow() 和 transform: translateY(-10px) 时，它会提前裁剪整个图层，导致阴影甚至部分边框被砍掉——看起来就像内容“撑出”了圆角或容器边界。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 修复方式不是调
box-sizing，而是加will-change: transform强制新建合成层 - 或改用
transform: translateX(-10px) rotateY(0.001deg)（极小 3D 变换绕过截断） - 父容器设
overflow: visible+position: relative，给裁剪留出空间
滚动容器里 overflow-x: auto 失效的底层原因
iOS Safari 默认禁用非惯性横向拖拽，即使写了 overflow-x: auto，手指划过去也没反应——这不是 CSS 没加载，而是滚动行为被系统拦截了。
- 必须加
-webkit-overflow-scrolling: touch（iOS 15 前必需，16+ 可省略但建议保留） - 或更现代的
overscroll-behavior-x: contain防止父容器联动滚动 - 注意：如果容器本身是
position: absolute且父级没设高度，100vh会退化成0，整个滚动上下文失效
viewport 宽度计算偏差放大溢出风险
iOS Safari 对 100vw 的处理比其他浏览器更“实在”：它真把滚动条宽度（通常 16px）算进去了。结果就是容器比视口宽 16px，所有子项跟着右移溢出——这个现象在桌面 Chrome 里几乎看不到，但在 iPhone 上一开调试就暴露。
- 别用
width: 100vw做根容器，改用width: 100%并确保父级有明确 content width - 需要全屏宽度时，用 JS 动态注入
document.documentElement.style.setProperty('--vw', `${window.innerWidth / 100}px`)，再用width: calc(var(--vw) * 100) - 检查是否误开了
user-scalable=no，它会让 Safari 在 pinch-zoom 后重排布局却不重算盒尺寸，造成 padding/border 占位失准
真正难调试的点在于：这些现象往往叠加出现。比如一个带 drop-shadow 的卡片，在 100vw 容器里用 grid 布局，又嵌套了 flex 子项——此时你改 box-sizing 只能解决一部分，必须一层层确认渲染上下文是否被意外截断或缩放。 DevTools 的「Layers」面板比「Elements」更能暴露问题根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
