HTML模板跨浏览器兼容的核心是严格遵循HTML5标准：从顶格无BOM的起步，配合语义化标签、Normalize.css统一默认样式、特性检测替代UA判断，IE11及以下需单独处理，2026年起可普遍放弃IE支持。
直接说结论：HTML模板跨浏览器兼容，核心不是“加一堆补丁”，而是从 开始就守住底线，再用语义化结构 + Normalize.css + 特性检测三件套兜住大部分问题。IE11 及更老版本必须单独考虑，但 2026 年起，多数项目已可明确放弃 IE 支持。
DOCTYPE 必须顶格写，且不能有 BOM
这是所有兼容问题的起点。一旦 前有空格、注释或 UTF-8 BOM 字节，IE/Edge Legacy 会直接进入怪异模式——盒模型错乱、width 解释不一致、float 行为异常，连调试都找不到根子。
- 用 VS Code 打开文件，右下角确认编码是
UTF-8 without BOM - 在编辑器里把光标移到第一行最左，按 ← 方向键，确保没隐形字符
- 别用旧式 DTD，如
，现代浏览器对它的解析反而更分裂
HTML5 语义标签在 IE 中不渲染？得靠 html5shiv
IE8 及以下完全不认识 、 这些标签，DOM 里能创建，但没默认样式、querySelector('main') 匹配不到、CSS 选中也无效。
- 只在 IE9 以下加载
html5shiv-printshiv.js： - 注意：IE11 虽支持这些标签，但
document.createElement('main')在页面加载前没执行过，仍可能被当未知元素处理；稳妥做法是在里提前执行一次document.createElement('main') - 别指望
html5shiv让 IE 支持或inert——它们是更晚的标准，shiv 不管
CSS 默认样式不一致？Normalize.css 比 reset 更靠谱
Chrome 给 设了 border: 2px outset，Firefox 给 加了内边距，Safari 对 的 size 属性渲染强制滚动条……这些差异不用 Normalize.css 压根没法统一。
- 引入顺序必须在所有自定义 CSS 之前：
- 别用
* { margin: 0; padding: 0; }，它重置过度、性能差，还破坏表单控件原生行为 -
normalize.css不会抹掉所有样式，而是让~的字号比例、的斜体行为、的缩放逻辑趋于一致
Flex/Grid 布局在 Safari 和旧 Edge 里怎么不生效？
不是所有“支持 Flex”都等于“支持一样”。Safari 10–13.1 对 flex-wrap: wrap 和 align-content 处理有偏差；IE11 的 Grid 是完全不同的旧语法（display: -ms-grid），Autoprefixer 根本不推荐用。
- 目标用户含 IE11？直接放弃
display: grid，改用display: flex+ 媒体查询降级为float或inline-block - 用
@supports (display: grid)做特性检测比 UA 判断可靠，但注意 IE11 完全不支持@supports，需配合 JS 检测 - Safari 中
input放在 flex 容器里时，min-width: auto表现异常，显式设min-width: 0可修复
真正容易被忽略的是：兼容性不是“所有浏览器看起来一模一样”，而是“结构可读、内容可达、关键功能可用”。比如 在 Firefox 里就是个文本框，但它仍做基础格式校验； 在 Safari 15.4+ 才有默认样式，之前就得手动补 position: fixed 和 backdrop。接受这种分层现实，比硬塞 polyfill 更可持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
