html响应式模板跨浏览器兼容需严格执行三件事：doctype顶格无bom、normalize.css前置并加box-sizing重置、js api必须存在性检测；缺一即导致ie11/旧safari从首行起错。
HTML响应式模板要真正在不同浏览器里“长得一样、动得正常”，靠的不是堆砌工具或盲目加 polyfill，而是三件确定性动作必须做对：DOCTYPE顶格无BOM、normalize.css统一默认样式、所有JS API必须用存在性检测。漏掉任何一件，IE11 或旧 Safari 就会从第一行开始错，后面再怎么写 Flex 或 Grid 都白搭。
DOCTYPE 必须独占第一行，且不能有 BOM
这是整个兼容链的起点。只要 DOCTYPE html 前面多一个空格、一段 PHP 输出、甚至 UTF-8 BOM 字节头，IE 和旧 Edge 就直接进怪异模式（Quirks Mode）——此时 box-sizing 失效、float 行为错乱、document.body.scrollTop 读不到真实值，连媒体查询都可能被忽略。
- 用 VS Code 打开 HTML 文件，右下角确认编码是
UTF-8 without BOM，不是UTF-8 - 删掉
前所有字符，包括 <code><!-- 注释 -->、空行、不可见控制符 - 别用
这类过时声明，现代浏览器反而解析更不稳定 - 在 Chrome DevTools 的 Elements 面板顶部看渲染模式，显示
Standards才算成功；若显示Quirks，就得回查源码开头
HTML5 语义标签在 IE8–10 中必须显式设 display: block
<header></header>、<nav></nav>、<main></main> 这些标签在 IE8 及以下根本不识别，会被当未知 inline 元素处理，导致布局塌陷、margin 失效、querySelector('main') 查不到节点。只引入 html5shiv 不够——它只让 IE “知道” 这些标签存在，但不会自动加 display: block。
- 必须在 CSS 中补这条规则：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 用条件注释只给老 IE 加载：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 如果目标用户基本不用 IE（比如纯移动端或内网已升级），可跳过这步；但别假设“没人用 IE”——政企内网环境仍卡在 IE11 是常态
CSS 新特性要用 @supports 或 JS 检测兜底，别硬写
写了 display: grid，IE11 会整条规则忽略；但若父容器还依赖它居中，整个区块就消失。更危险的是 @supports (display: grid) 本身 IE11 就不支持语法，会直接跳过整段 CSS，降级逻辑根本没机会执行。
- 关键布局先写 Flex 保底：
.container { display: flex; }，再用@supports升级：@supports (display: grid) { .container { display: grid; } } - 旧 Safari（iOS 8–9.3）对
flex-wrap: wrap和align-content行为不一致，建议 fallback 到display: -webkit-box - 构建时集成
Autoprefixer，目标浏览器配置要精准，例如："browserslist": ["last 2 versions", "ie >= 11"]，避免为已淘汰版本冗余输出前缀
JS API 必须用存在性检测，禁用 navigator.userAgent
直接调用 fetch() 或 classList 在 IE11 里会报 undefined is not a function 并中断执行。UA 字符串极易伪造、过时，且 Chrome/Firefox 已开始隐藏真实版本，完全不可信。
- 正确检测方式：
if ('fetch' in window) { /* 用原生 */ } else { /* 加载 whatwg-fetch */ } - 对关键 API 补 polyfill：
Promise用promise-polyfill@8，Array.from用core-js/stable/array/from -
normalize.css必须放在所有自定义 CSS 之前，且建议加全局重置：* { box-sizing: border-box; }，否则 IE 宽高计算和现代浏览器差一个padding
最常被忽略的点是：normalize.css 和 box-sizing: border-box 不是“加分项”，而是和 DOCTYPE 同级的基础层。没它们，光靠媒体查询和 Flex 布局，只是把错得更优雅一点而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
