html结构不合法会导致css样式失效或错位，主因是浏览器无法按预期解析dom：doctype缺失或错误触发怪异模式，标签未闭合造成渲染树断裂，嵌套过深引发继承异常与重排错乱。

HTML结构不合法，CSS样式就大概率失效或错位——不是浏览器“不支持”，而是它根本没按你设想的方式解析DOM。

DOCTYPE缺失或错误直接禁用CSS3特性

没有，或写成<code>这类旧声明，浏览器会进入怪异模式（<code>document.compatMode === "BackCompat"）。此时flexbox、grid、@supports、甚至calc(100vh - 60px)都可能被忽略或计算为0。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 必须放在第一行，且仅此一行；大小写不敏感，但html小写是通用实践
• 不要混用XHTML语法（如），现代浏览器只认<code>
• 验证方式：打开控制台执行document.compatMode，返回"CSS1Compat"才表示标准模式生效

标签未闭合导致渲染树断裂

像<nav><table><tr><th>Home</th></tr></table></nav>这种嵌套错乱，浏览器会强行纠错：提前闭合<nav></nav>、丢弃孤立的、把<th>塞进隐式创建的<code><tbody>。结果是CSS选择器<code>nav table tr th匹配不到任何节点。

• <table>内只允许<code><thead>、<code><tbody>、<code><tfoot>、<code><tr>，不能直接放<code><th> <li> <code><nav></nav>、<header></header>等语义标签必须显式闭合，不能依赖浏览器自动补全
• 用W3C Validator或VS Code插件“Auto Close Tag”实时拦截未闭合问题

嵌套过深引发样式继承与重排异常

超过6层嵌套（如<div><div><div><section><article><p>）不仅拖慢DOM构建，还会让CSS继承链变长、计算样式耗时上升，更易触发意外重排——比如父级<code>display: flex下子元素position: absolute的定位基准错乱。

• 优先用语义化标签替代无意义<div>堆叠：<code><nav></nav>代替<div class="nav">，减少一层嵌套<li>避免在<code><table>单元格里再套<code><div>布局，表格本身有固有盒模型约束<li>Chrome DevTools → Elements → 右键节点 → “Show DOM properties” 查<code>node.depth，超6层就该重构

最隐蔽的问题往往不在CSS里，而在HTML是否被浏览器当成“一段可预测的结构”来处理——结构一松动，样式就像失去地基的墙。