html浏览器兼容核心是三件事：doctype必须顶格写，老ie需html5shiv识别语义标签，css/js须检测api支持性而非硬编码；其他方案均基于此三原则。
HTML模板适配不同浏览器，核心就三件事：DOCTYPE必须顶格、老IE要靠html5shiv“认得清”、CSS和JS不能假设所有浏览器都支持同个API。 其他花哨方案都是在这三根柱子上搭的，柱子歪了，再加polyfill也白搭。
DOCTYPE必须顶格写，前面不能有空格或BOM
这是所有兼容问题的起点。只要第一行不是，或者它前面有空格、注释、UTF-8 BOM字节头，IE和旧Edge就会进怪异模式——盒模型变回IE5那种，<code>width算的是内容宽不包括padding，float行为全乱，连document.body.scrollTop都可能读错。
实操建议：
- 用VS Code打开HTML文件，右下角确认编码是
UTF-8 without BOM（不是UTF-8） - 删掉
前所有字符，包括<code><!-- 注释 -->和空行 - 别用
这类过时声明，现代浏览器反而解析更不稳定
IE8–IE11不识别等语义标签，得靠html5shiv
IE8及以下直接把<main></main>当未知标签，不渲染默认样式，querySelector('main')也查不到——不是JS报错，是DOM里压根没这个节点。IE9–11虽能创建元素，但没默认display: block，会导致布局塌陷。
实操建议：
- 在
里引入html5shiv：<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> - 必须配合
display: block规则，否则IE9–11中<section></section>仍会内联显示；可在CSS里补一句：main, section, article, aside, nav, header, footer { display: block; } - 用条件注释只给IE加载：
<!--[if lt IE 9]><script src="html5shiv.min.js"></script><![endif]-->
CSS新特性别硬塞，用@supports或JS检测兜底
比如写了display: grid，IE11会直接忽略整条规则，但若父容器还依赖它居中，整个区块就消失；又比如display: contents在Firefox 63+才支持，IE全系不认，用了等于删掉HTML结构。
实操建议：
- 别依赖
@supports (display: grid)单独判断——IE11完全不支持@supports语法，会跳过整段CSS - 对关键布局，先写Flex降级方案：
.container { display: flex; } @supports (display: grid) { .container { display: grid; } } - JS中检测API存在性，而不是UA字符串：
if ('IntersectionObserver' in window) { /* 用原生 */ } else { /* 加载lozad.js */ } - 避免
all: unset，Safari 9.1–13.1中它会让<button></button>失去可点击态，且无法通过cursor: pointer修复
移动端viewport meta别乱加user-scalable=no
加了user-scalable=no或maximum-scale=1，iOS Safari 13+会直接禁用双击放大，还可能导致软键盘弹出时页面跳动、表单聚焦异常。这不是bug，是WebKit主动限制。
实操建议：
- 最简安全写法：
<meta name="viewport" content="width=device-width, initial-scale=1">，其他参数全删 - 真要防缩放，改用CSS：
body { touch-action: manipulation; }，比meta更可控 - Safari横屏时会重算
device-width，如果用vw做字体单位，字号可能突变，优先用rem或媒体查询
最容易被忽略的点：兼容不是让所有浏览器看起来一模一样，而是确保核心结构不塌、关键功能不崩、文字可读、表单能交。比如input type="date"在Firefox里就是文本框，这不是缺陷，是标准允许的行为；强行统一UI，反而因日期解析差异（Date.parse()在各浏览器返回值不同）引入新bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
