contain-intrinsic-size必须与content-visibility: auto配套使用，单独设置无效；它用于为未渲染元素预设占位高度，防止滚动跳变和布局塌陷，需用绝对像素值“宁大勿小”设置，且不支持相对单位或auto/0。

contain-intrinsic-size必须和content-visibility: auto一起用

单独写contain-intrinsic-size毫无效果。它不是独立优化项，而是content-visibility: auto的强制配套项——浏览器对设了content-visibility: auto的元素，默认按高度0参与布局，contain-intrinsic-size就是用来“补上这个0”的。

常见错误包括：

• 只给<img>加contain-intrinsic-size：无效，该属性只对块级容器（如<div class="card">）生效 <li>写了<code>content-visibility: auto但漏掉contain-intrinsic-size：滚动条会突然缩回、内容上跳、父容器高度塌陷
• 用contain-intrinsic-size: auto或留空：等同于没写，Chrome 和 Edge 会静默忽略，Safari 可能解析为0

取值不能靠猜，得按容器类型分情况写死

contain-intrinsic-size只接受绝对数值，不支持em、rem、百分比，也不接受auto或0。它的作用不是精确还原真实高度，而是提供一个稳定、可预期的占位高度，避免布局偏移（CLS）。

推荐写法：

• 固定高度列表项（如消息气泡、菜单）：contain-intrinsic-size: 64px
• 卡片类（宽高比相对固定）：contain-intrinsic-size: 300px 240px（Chrome 122+ 支持双值；Safari 19 仍只认单值，需降级）
• 文字流式项（标题行数不定 + 图片）：保守取最大可能高度，如contain-intrinsic-size: 160px或240px
• 网格项需控宽高：优先用双值，fallback可用@supports包裹并降级为单值高度

height/min-height会覆盖contain-intrinsic-size的高度

如果容器或其子元素设置了height、min-height或max-height，浏览器会优先采用这些值，contain-intrinsic-size中的高度部分将被完全忽略——但宽度值仍有效（前提是没被其他规则覆盖）。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载

更安全的做法是：

• 用aspect-ratio替代固定height，尤其在响应式卡片中（iOS 15.4+ / Chrome 89+ 支持）
• 调试时在 DevTools 的 Computed 面板检查height来源，确认最终生效的是哪条规则
• 避免在content-visibility: auto容器内写height: 100%——它依赖父容器高度，而父容器可能因未渲染子项塌陷

兼容性差，必须用@supports包裹并降级

截至2026年6月，content-visibility和contain-intrinsic-size在 Safari 中支持仍不稳定：Safari 19 不支持双值写法，对auto值解析不可靠；Firefox 完全不支持contain-intrinsic-size（v128 仍无）。

实际项目中必须：

• 用@supports (content-visibility: auto)包裹整套规则，防止旧版浏览器误解析
• 服务端或构建时注入降级 class（如.no-cv），对不支持环境禁用该优化
• 不要依赖contain-intrinsic-size: auto做 fallback——部分浏览器直接丢弃该声明，等于没设

真正容易被忽略的点是：这个尺寸不是越准越好，而是“足够稳”就行。预估偏差 10%～20% 比强行精确但导致 JS 动态重设更可靠——因为每次重设都可能触发 layout shift。