是的，现代浏览器及IE8+默认值均为content-box；IE6–7不支持该属性但行为等效；问题多源于全局重置遗漏或被覆盖，需确保*{box-sizing:border-box}在css顶部且未被更高优先级规则覆盖。
box-sizing 默认值在不同浏览器中是否一致
是的，现代浏览器（chrome 10+、firefox 29+、safari 5.1+、edge 12+）对 box-sizing 的默认值完全统一：所有元素默认为 content-box。IE8+ 也遵循此规则，但 IE6–7 不支持 box-sizing 属性，且其默认盒模型行为就是 content-box（只是不支持显式设置）。真正的问题不在“默认值”，而在于开发者常忽略重置时的遗漏——尤其当使用第三方 ui 库或遗留 CSS 时，*, *::before, *::after 的全局 box-sizing: border-box 可能被覆盖或未生效。
- 检查是否在 CSS 最顶部写了
* { box-sizing: border-box; }，且该规则未被更高优先级选择器（如
div.foo）中的box-sizing: content-box覆盖 - IE8 不解析
*::before和*::after，所以仅靠* { box-sizing: border-box; }*的声明 - 某些 CSS-in-js 库（如 styled-components v5 之前）可能在 SSR 时漏掉全局重置，导致首屏渲染用
content-box， hydration 后才修正
padding 和 border 在 flex 容器子项中的表现差异
当元素是 flex 子项时，padding 和 border 仍按标准盒模型计算，但它们会影响 flex-basis 的解析逻辑，尤其在未显式设置 flex-basis 时。Chrome 和 Safari 对 flex-basis: auto 的处理更严格地遵循规范（即先取 width/height，再加 padding+border），而旧版 Firefox（padding 错误计入主轴尺寸判定，导致换行异常。
- 显式写死
flex-basis（如flex-basis: 200px）可绕过歧义，此时padding和border只影响内容区，不影响伸缩基准 - 避免依赖
flex: 1（等价于flex: 1 1 0%）在有padding的容器内做等分——百分比基准为内容宽高，不含内边距，容易造成视觉不均 - 测试时重点看 Firefox 52–59 的行为，其
flex-basis: auto对min-width: 0的响应不一致，需配合min-width: 0或overflow: hidden强制收缩
margin-top 在块级上下文中的塌陷现象是否跨浏览器统一
是的，margin-top 塌陷（margin collapsing）的行为在所有支持 CSS2.1 的浏览器中完全一致：相邻块级元素、父级与首个子级、空块级元素之间的垂直外边距会合并。问题不在于“是否塌陷”，而在于“何时被阻止”——不同浏览器对触发条件的判断存在细微差别，尤其是涉及 transform、contain、display: flow-root 等新特性时。
-
display: flow-root在 Chrome 65+、Firefox 59+、Safari 12.1+ 中都能阻止塌陷，但 IE 完全不支持，Edge 16–18 需用display: -ms-flexbox替代 -
transform: translateZ(0)在 Chrome/Safari 中可靠阻止塌陷，但在 Firefox 52–67 中对某些嵌套结构无效（需叠加overflow: hidden） - 使用
border-top: 1px solid transparent是最兼容的 hack，所有浏览器都认，且不影响视觉，但会略微增加 layout 开销
IE11 下 padding-right 在 RTL 文本容器中错位
IE11 对 direction: rtl 容器内的 padding-right 解析错误：它把 padding-right 当作“逻辑右”（即视觉左），而非“物理右”。结果是，当你写 padding-right: 20px 时，IE11 把 20px 加在了容器的左侧（文字起始侧），而其他浏览器正确加在右侧（文字结束侧）。
立即学习“前端免费学习笔记（深入）”；
- 改用逻辑属性：用
padding-inline-end: 20px替代padding-right，Chrome/Firefox/Safari/Edge 16+ 支持，IE11 不支持但可 fallback - IE11 专用 hack：
@supports (-ms-ime-align: auto) { .rtl-container { padding-right: 0; padding-left: 20px; } }，利用 IE11 特有私有属性触发条件规则
- 若容器同时有
text-align: right和direction: rtl，优先移除text-align——IE11 的direction已足够控制文本流向，冗余的text-align会加剧解析混乱
实际项目中最容易被忽略的，是 box-sizing 全局重置在 CSS 预处理器 @import 顺序中的位置，以及 flex-basis 与 padding 交互时对 min-width 的隐式依赖。这两点一旦出问题，往往表现为“看起来正常，但换浏览器就错位一两个像素”，排查成本远高于初期写明确。