HTML卡片结构不合规会导致浏览器自动修复DOM引发错位，应严格遵循ul/ol仅含li的规范，用grid布局替代float/inline-block，关闭list-style并用::before自定义标记，配合aspect-ratio和contain属性确保渲染稳定。
HTML卡片结构不合规，浏览器自动“修复”导致错位
浏览器对 ul、ol 的子元素有硬性限制：只允许 li（或嵌套的 ul/ol）。一旦你在 ul 里塞了 div、section 或直接写文本，解析器会把非法内容移出容器——DOM 结构和你写的 HTML 完全不一致。
常见现象包括：卡片突然缩进异常、DevTools 里看到 li 被拆开或包裹了额外标签、屏幕阅读器跳过部分卡片。这不是 CSS 没写对，是结构本身被浏览器重写了。
实操建议：
-
li内部可直接放img、h3、p、span等语义合法元素；需要分组时，用包在li里，而不是放在ul外层 - 别用空格或换行符“模拟”排版——那是结构失控的信号，该用
display: flex或display: grid控制布局 - 检查生成的 DOM，不是看源码，而是用浏览器 DevTools 的 Elements 面板确认实际结构
用 display: grid 做卡片网格，别碰 float 和 inline-block
float 必须清浮动，inline-block 对 HTML 换行符敏感，两者在卡片高度不一时都会错位。现代方案直接上 display: grid，一行代码就能稳住所有列高和间距。
关键配置：
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 最小 280px，多屏自动均分，不用写断点也能响应 -
gap: 1rem替代margin，无外边距合并风险，父容器不会溢出 - 移动端只需改
minmax()第一个参数，比如minmax(220px, 1fr)，比媒体查询里反复调flex-wrap更干净
别用 div 套 div 模拟网格，也别为了“看起来像卡片”硬套 article。语义优先：商品/博客摘要用 article，仪表盘指标块用 div 即可。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
list-style 和 flex 一起用会出问题
给 ul 加 display: flex 后，原生圆点标记（bullet）容易错位、被裁切，甚至挤出容器。这不是 bug，是 list-style 和 flex 盒模型天然不兼容。
实操建议：
- 统一加
ul { list-style: none; padding-left: 0; }，彻底关掉默认标记 - 如需自定义图标或数字，用
li::before，完全可控，且不参与 flex 尺寸计算 - 别依赖
list-style-position: inside——它会让标记参与flex-basis计算，导致换行异常或宽度塌陷 - 横向排列时，确保每张卡片有明确
min-width或flex-basis，否则文字长短不一，高度会塌
卡片内部图文并排，用 aspect-ratio 锁定图片比例
图片加载慢、字体未就绪、服务端数据延迟返回，都可能导致卡片高度跳动。光靠结构和 flex 不够，得从约束维度入手。
真正稳的方案：
- 给图片容器加
aspect-ratio: 1 / 1，强制 160×160 区域不变形，留白用浅灰背景填满 - 标题用
display: -webkit-box+-webkit-line-clamp: 2截断两行，避免撑开卡片 - 价格等关键信息用
font-weight: bold和固定颜色（如color: #e53935），不依赖 JS 动态插入 - 所有卡片容器加
contain: layout style paint，隔离渲染影响，防止重排扩散
最常被忽略的是：没设 aspect-ratio 时，图片异步加载会导致整个网格重排；没加 contain 时，一张卡片更新可能触发整页重绘。这些细节不处理，再标准的 HTML 结构也会在真实场景里失守。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
