contain-intrinsic-size对按钮无效，只对设置了content-visibility: auto的块级容器（如div、section）生效；按钮本身是内联元素，不参与预估占位，需为其父容器设置该属性并配合理想占位高度。
contain-intrinsic-size 对按钮无效？先确认作用对象
直接给 <button></button> 加 contain-intrinsic-size 没用——这个属性只对设置了 content-visibility: auto 的**块级容器元素**生效，比如 <div class="card"> 或 <code><section></section>。按钮本身是内联元素，且通常不参与布局占位的“预估”逻辑。
真正要防抖动的，不是按钮本身，而是它所在的**父容器**（比如卡片、表单项、弹窗内容区）。当这个容器被延迟渲染（content-visibility: auto），又没配 contain-intrinsic-size，整个区域高度会塌成 0px，按钮就会突然“掉下来”或触发上跳。
- 错误写法：
button { content-visibility: auto; contain-intrinsic-size: 40px; }→ 浏览器忽略 - 正确写法：
.form-section { content-visibility: auto; contain-intrinsic-size: 120px; }，按钮放在这个<div class="form-section"> 里 <li>如果按钮是独立浮动/固定定位（<code>position: fixed或sticky），它根本不受content-visibility影响，抖动另有原因（比如父容器高度塌陷导致 sticky 锚点偏移） - 纯文字按钮 + 固定行高（如
line-height: 40px）：保守取contain-intrinsic-size: 64px - 按钮带图标 + 左右 padding（如
padding: 12px 24px）：按最大可能高度算，例如font-size: 16px+ 行高 1.5 → 高度约 48px，再加 20px 安全余量 → 写contain-intrinsic-size: 72px - 按钮嵌套在响应式卡片里（含头像、标题、描述）：优先用双值
contain-intrinsic-size: 320px 160px（宽高），但必须@supports (contain-intrinsic-size: 320px 160px)包裹降级，Safari 19 只认单值 - 动态插入的按钮（如 JS 创建的“加载更多”）：初始容器设保守值（如
120px），加载完成后再用element.style.containIntrinsicSize = 'auto'或重设精确值 - 常见翻车点：
.btn-container { height: 100%; content-visibility: auto; contain-intrinsic-size: 80px; }→height: 100%生效，80px被无视 - 安全替代：
.btn-container { aspect-ratio: 4 / 1; content-visibility: auto; contain-intrinsic-size: 320px 80px; }（iOS 15.4+ / Chrome 89+ 支持） - 调试时打开 DevTools → Computed 面板 → 查
height来源，确认最终生效的是哪条规则 - 避免在
content-visibility: auto容器里写min-height: fit-content或min-height: max-content—— 这些依赖子元素尺寸，而子元素此时未渲染 -
loading="lazy"只对<img>和<iframe></iframe>生效，且必须带src属性；CSS 背景图懒加载需 JS 实现 - 解决办法：给图标
<img>显式写width和height属性（如<img src="icon.svg" style="max-width:90%" style="max-width:90%">），防止加载前占位为 0×0 - SVG 图标优先用
<svg></svg>内联，配viewBox和显式width/height，避免 Safari fallback 渲染再缩放
按钮所在容器该设多高？宁大勿小但别瞎估
你不是在还原真实高度，而是在给浏览器一个**稳定、可预期的占位值**。设小了，容器渲染后撑开，按钮上跳；设大了，只是留白，不影响功能。
为什么按钮还是抖？检查 height / min-height 是否覆盖了占位
contain-intrinsic-size 的高度部分，会被同级或更具体的 height、min-height 规则完全覆盖——哪怕只写了一行 height: 100%，也会让预设高度失效。
按钮抖动和 loading="lazy" 有关？那是另一回事
如果你的按钮是 <img> 或背景图驱动的（比如带 icon 的按钮），那抖动大概率来自图片加载，不是 content-visibility 的问题。
真正难搞的是混合场景：按钮容器用了 content-visibility: auto，里面又塞了个懒加载图标——这时得同时处理两层占位：容器用 contain-intrinsic-size，图标用 HTML width/height。
