css 中 box-sizing 属性为何无法通过 details 元素继承？details 元素内部使用 shadow dom 插槽渲染内容，导致子元素继承的是插槽节点的样式（`display: block; content-visibility: hidden`），而非 details 自身的 css 样式；因此 `* { box-sizing: inherit }` 无法作用于其内部子元素，默认回退为 `content-box`。
DETAILS 元素在现代浏览器中（Chrome、Firefox 等）采用 Shadow DOM 实现其折叠/展开行为。根据 HTML 规范，，另一个用于其余子内容（即
/* 浏览器内部等效样式（不可直接覆盖） */
slot[role="presentation"] {
display: block;
content-visibility: hidden; /* closed 状态下隐藏 */
/* 注意：此处未设置 box-sizing，因此取初始值 content-box */
}由于该 slot 是 shadow host（
*, *::after, *::before { box-sizing: inherit; }
html { box-sizing: border-box; }无法匹配 shadow slot 节点（它既不是 light DOM 中的 *，也不是 ::before/::after 伪元素），因此 slot 节点的 box-sizing 值保持为 CSS 初始值 content-box。所有嵌套在其内的子元素（如
✅ 正确修复方案：显式为 DETAILS 内部子元素设置 box-sizing
立即学习“前端免费学习笔记（深入）”；
/* 方案 1：针对 details 内部所有块级子元素（推荐） */
details > * {
box-sizing: border-box;
}
/* 方案 2：更精确地匹配主体内容（含 summary 后的任意子节点） */
details > :not(summary) {
box-sizing: border-box;
}
/* 方案 3：若需全局兼容，可扩展选择器范围（谨慎使用） */
details *, details *::before, details *::after {
box-sizing: inherit;
}⚠️ 注意事项：
- 不要依赖 * { box-sizing: inherit } 跨 Shadow DOM 边界生效——这是设计使然，非 bug；
- content-visibility: hidden 是实现折叠的关键，但不影响盒模型计算，仅控制渲染可见性；
- 若使用自定义 封装组件（如 Web Component），可通过 :host 或 ::slotted() 显式控制 slot 内样式；
- 在 CSS 重置库（如 modern-normalize）中，该问题已普遍被识别，主流方案均采用 details > * 显式声明。
总结：这不是浏览器兼容性问题，而是 Shadow DOM 继承机制的必然结果。理解 slot 作为样式继承链中的“中间节点”，是解决此类问题的核心。始终对 details 的直系子元素做显式 box-sizing 声明，即可确保布局行为一致可靠。
