HTML 文档在不同浏览器中的结构兼容性-html教程-PHP中文网

doctype必须顶格写，否则触发怪异模式导致dom解析异常；html5语义标签需手动设display:block；normalize.css须置于自定义css前并配合box-sizing:border-box。

html 文档在不同浏览器中的结构兼容性

DOCTYPE 必须顶格写，否则直接进怪异模式

这是所有结构兼容问题的开关。只要 前面有空格、<code>、PHP 输出的空白，甚至 UTF-8 BOM 字节，IE 和旧版 Edge 就会强制进入 Quirks Mode。此时 document.body.scrollTop 读不准、浮动塌陷、width 解析逻辑完全不同——不是样式没生效，是整个 DOM 解析树都变了。

验证方式很简单：打开 Chrome DevTools → Elements 面板顶部看渲染模式，显示 Standards 才算成功；显示 Quirks 就得立刻检查 HTML 源码第一行。

用 VS Code 打开文件，右下角确认编码是 UTF-8 without BOM（不是 UTF-8）
构建阶段加 CI 脚本检查首行是否为 ，比人工更可靠
别用 这类过时声明，现代<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>反而解析更不稳定

HTML5 语义标签在 IE8–IE11 中不自动当块级元素

<header></header>、<nav></nav>、<main></main> 这些标签在 IE8–IE11 中默认是 inline，哪怕引入了 html5shiv，也不会自动加 display: block。结果就是 margin 失效、高度塌陷、querySelector('header') 返回 null（IE8 及以下）或返回但无法正确布局（IE9+）。

必须手动补这条 CSS：

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

条件加载更稳妥：

html-deploy

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

下载

<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->

不要用 document.createElement('header') 手动创建——漏写一个就全崩，且不解决样式问题
如果目标环境已无 IE8–IE10，可跳过 html5shiv，但 IE11 仍需上述 CSS 规则
<main></main> 在 IE11 中虽能被识别为元素，但若没设 display: block，它仍按 inline 渲染

DOM 解析差异比 CSS 更隐蔽，优先查结构而非样式

很多“样式不生效”其实是 DOM 结构没建出来。比如：<div><p>文本</p></div>

这种错误闭合，在 Chrome/Firefox 中会被自动修复，但在 IE 中可能直接截断后续节点；又比如自定义属性没加 data- 前缀，在旧版 Safari 中会被忽略，导致 JS 读不到。

用 W3C Markup Validation Service 验证 HTML 结构，不只看“通过”，要盯住 warning 级提示
在 IE11 DevTools 中用 console.dir(document.body) 查 DOM 树是否和预期一致，别只信 Elements 面板的渲染结果
避免在 <table> 内直接放 <code><div> —— IE 对表格模型的容错极低，容易触发隐式闭合<h3>normalize.css 必须放在所有自定义 CSS 之前</h3> <p>不同浏览器对 <code><h1></h1> 的 margin-top 默认值不同（Chrome 是 0.67em，Firefox 是 0.83em），对 <button></button> 的边框、内边距、字体继承也各有规则。不统一就等于给每个浏览器发不同图纸。

normalize.css 不是清零，而是保留合理默认值并修复已知 bug；reset.css 把所有 margin/padding 归零，反而要重写大量基础样式。
- <link rel="stylesheet" href="normalize.css"> 必须出现在所有自定义 CSS 之前
- 务必加全局 * { box-sizing: border-box; }，否则 IE 计算宽高时会把 padding 算进 width，现代浏览器不会
- 别用 all: unset 或 all: revert —— Safari 目前不支持，会直接忽略整条规则
结构兼容性最易被忽略的点在于：它不报错，也不显红，只是 DOM 节点位置偏了、尺寸小了、事件绑不上。查兼容问题时，先看 document.body.children 有多少个节点，再比对 Chrome 和 IE11 的输出，比盯着样式面板有效得多。