html5语义化标签无统一默认样式，需显式声明display: block及重置盒模型；ie8–9须引入html5shiv并配合条件注释，且css必须在脚本后加载以确保生效。
HTML5 语义化标签本身不带统一视觉样式，浏览器按各自 UA 样式表渲染，导致显示差异——这不是 bug，而是标准允许的实现自由。真正影响一致性的，是默认 display 值、盒模型、margin/padding 行为，以及旧浏览器对标签的识别能力。
语义标签必须显式设为块级
IE8–9 把 <header></header>、<section></section> 等当未知 inline 元素处理，既不占行也不响应 margin。仅引入 html5shiv 不够，它只让 DOM 认识这些标签，但不会自动加样式。
- 全局声明：
header, nav, section, article, aside, footer, main { display: block; margin: 0; padding: 0; } - IE8 及以下需配合条件注释加载 html5shiv，且脚本必须在 CSS 之前执行
- 避免用
* { display: block }，会破坏<input>、<img>等原生行为
默认样式差异要靠 normalize.css 平衡
Chrome 的 <h1></h1> margin-top 是 0.67em，Firefox 是 0.83em，IE6 甚至用像素值。reset.css 归零再重写太重，normalize.css 更务实：保留合理默认（如表单控件尺寸、列表缩进），只修复已知跨浏览器 bug。
- 务必加
* { box-sizing: border-box; }，否则 IE 宽高计算不含 padding，现代浏览器含，布局必然错位 - 不要用
all: unset或all: revert，Safari 9.1–13.1 中可能让按钮失焦或不可点击
渲染模式必须锁定为标准模式
DOCTYPE 缺失、开头有空格、BOM 字节或注释，都会触发 IE/Edge Legacy 的怪异模式（Quirks Mode）——盒模型、浮动、字体度量全乱套。
- 首行必须是
，前面不能有任何字符（包括空格、注释、BOM） - 用 Chrome DevTools Elements 面板顶部确认渲染模式显示为 “Standards”，不是 “Quirks”
- 构建阶段可用 html-validate 自动检查首行合规性
<mark></mark> 这类内联语义标签要主动重置样式
<mark></mark> 在 Chrome 显示黄底，在 Firefox 是透明底+系统高亮色（常不可见），Safari 早期版本甚至无样式。这不是 bug，是 UA 样式表定义不同。
- 排查时直接看 DevTools 的「Computed」面板，确认
background-color和color最终值来源 - 不要只盯「Styles」面板里写的规则，要查是否被更高优先级样式覆盖或被
!important干扰 - 统一做法：
mark { background-color: #ffeb3b; color: #212121; padding: 0.1em 0.3em; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
