live server是必须的，因file://协议会禁用@import、font-face等css特性加载，导致兼容性误判；只有通过http://127.0.0.1:5500等本地http服务才能真实模拟线上环境，确保css解析、路径、作用域和特性支持符合标准。
Live Server 是必须的，file:// 协议下 CSS 兼容性测试不可信
直接双击 HTML 或右键用浏览器打开，地址是 file:// 协议——这时浏览器会禁用部分 CSS 特性加载逻辑（比如 @import、font-face 加载本地字体、某些 grid / container 的初始计算），导致你看到的“不兼容”其实是协议限制，不是真实浏览器行为。Live Server 启动的是 http://127.0.0.1:5500/，才模拟线上环境，CSS 解析路径、作用域、特性支持都按标准走。
常见误判场景：
- 写了
display: grid;但页面没效果 → 实际是父容器没设height或内容塌陷，file://下更易被掩盖 -
clamp(1rem, 4vw, 2rem)不生效 → 旧版 Safari 需前缀，但file://下连基础解析都可能跳过，无法判断是语法错还是兼容性问题 - CSS 变量（
var(--color)）在控制台显示为undefined→file://下部分浏览器不执行变量级联，换 Live Server 立刻正常
检查 CSS 是否真被加载，别只看样式面板
开发者工具里 Elements 标签页能看到内联样式和已应用规则，但容易漏掉“加载失败却没报错”的 CSS 文件。真正验证是否加载成功，得看 Network 标签页：
- 刷新页面后，在 Network 中筛选
css，确认你的style.css出现在列表里，且状态码是200 - 如果状态是
404，说明link的href路径错了——Live Server 默认以当前 HTML 文件所在目录为根，不是工作区根目录 - 如果状态是
304或200但文件内容为空 → 检查 CSS 文件本身有没有 BOM 头、编码是不是 UTF-8 无 BOM（VSCode 右下角点编码可切换） - 点击该 CSS 请求，看 Preview 标签页是否能渲染出样式规则；如果一片空白，大概率是语法错误（比如漏了
}）或 MIME 类型被服务器误判（Live Server 通常不会，但自建服务可能）
跨浏览器测试时，端口和路径必须一致
想用 Safari、Edge、Firefox 同时访问同一个 Live Server 页面做对比，不能只改浏览器，还要确保所有浏览器都访问完全相同的 URL：
- 默认
http://127.0.0.1:5500/index.html在 Safari 和 Chrome 下行为可能不同，但这是浏览器差异，不是环境问题 - 如果改过
liveServer.settings.port（比如设成3000），那所有浏览器都必须访问http://127.0.0.1:3000/index.html，不能一个用5500一个用3000 - 局域网设备（如手机）要访问，需设
liveServer.settings.host为0.0.0.0，并关掉本机防火墙对应端口；手机浏览器访问http://[电脑IP]:5500/index.html，不是localhost - 不要在地址栏手动删路径去试子页面（比如从
/index.html改成/test.html）——Live Server 不自动代理未声明的 HTML，404 是正常的，得确保目标文件存在且路径正确
兼容性断点调试：CSS 无效时，先看 computed，再查 sources
当某条 CSS 规则没生效，别急着改代码。打开 DevTools 的 Elements 面板，选中元素，在右侧 Styles 标签页里找那条规则——如果被划掉（strikethrough），说明被更高优先级规则覆盖；如果压根没出现，说明选择器没匹配上或文件根本没加载。
- 点开 Computed 标签页，搜属性名（比如
display），看最终值来自哪条规则、哪个文件、第几行——这比猜“是不是 IE 不支持”快得多 - 如果 Computed 里有值，但视觉不对 → 检查是否被
transform、clip-path或父容器overflow截断 - Sources 标签页里确认 CSS 文件已加载，并且断点打在对应行附近（虽然 CSS 不能设断点，但 JS 调用
getComputedStyle时可以） - 需要验证 IE 行为？别信 BrowserStack 截图——IE 已停更，真实兼容性测试应聚焦 Edge（Chromium 内核）、Safari（WebKit）、Firefox（Gecko）三端，用 Can I Use 查具体特性支持表，再结合 Live Server 实测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
