如何使html在各浏览器打开效果一致

推荐使用 normalize.css 或 modern-normalize 统一浏览器默认样式，全局设置 box-sizing: border-box，定义跨平台字体栈并显式声明 line-height，grid/flex 布局需用 @supports 降级，且必须配置 viewport 元标签。

用 reset.css 或 normalize.css 统一默认样式

浏览器对 <h1></h1>、<p></p>、<ul></ul> 等元素的默认 margin、padding、font-size 各不相同，这是视觉不一致的主因。直接写 * { margin: 0; padding: 0; } 太粗暴，会破坏表单控件、<textarea></textarea> 等原生行为。

推荐用 normalize.css（保留合理默认、修复已知差异）或轻量 reset.css（如 modern-normalize）。不要自己手写重置规则——容易漏掉 button 的 vertical-align、input[type="number"] 的箭头、details 的折叠逻辑等细节。

• 通过 <link rel="stylesheet" href="https://unpkg.com/normalize.css@latest"> 引入，放 最前面
• 避免同时引入多个 reset 类库，它们互相覆盖会导致更难调试
• 若用 CSS-in-js 或组件库（如 Ant Design），先确认它是否已内置 normalize；重复引入可能让按钮边框变细、字体行高异常

box-sizing: border-box 必须全局生效

IE8+、chrome、firefox 默认对新元素用 content-box，但开发者直觉是“我设了 width: 200px，它就该占满 200px”，结果加上 padding 和 border 就撑出父容器。这个差异在 Flex/Grid 布局中尤其致命。

在所有项目入口 CSS 顶部加：

立即学习“前端免费学习笔记（深入）”；

*, *::before, *::after {   box-sizing: border-box; }

注意：不要只写 * { box-sizing: border-box; }，漏掉伪元素会导致 ::before 插入的图标尺寸计算错误。

• 某些旧版 ios safari 对 *::after 的 box-sizing 支持不稳定，若遇到伪元素定位偏移，单独给该元素加 box-sizing: border-box
• 第三方 ui 库（如 bootstrap）通常已声明此规则，检查其源码避免重复或冲突

字体渲染和字号别依赖系统默认

font-family 写 "Helvetica" 在 windows 上 fallback 到 SimSun，Mac 上到 San Francisco，linux 可能到 DejaVu Sans，连 16px 的实际高度都不同。更隐蔽的是 line-height 计算：Chrome 用 font-metrics，Firefox 有时按 em-box，Safari 对可变字体处理又不同。

关键动作是锁定基础字体栈 + 显式设置 line-height：

• 用 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 覆盖主流系统
• 根元素设 font-size: 100%;（不是 16px），让缩放和系统设置生效
• 所有文本容器必须声明 line-height，例如 p { line-height: 1.5; }，避免浏览器按字体自身 metrics 自由发挥
• 禁用 -webkit-font-smoothing: antialiased; 这类私有属性，它在 Chrome 新版本中已被忽略，且在 Safari 中反而导致文字发虚

Flex/Grid 布局要防老浏览器降级错乱

Chrome 50+、Firefox 48+、Safari 10.1+ 对 display: flex 的实现基本一致，但 IE11 的 flex-wrap、align-content 行为和现代浏览器差很多；iOS 9.3 的 Grid 完全不可用。直接写 display: grid 而不做降级，在部分设备上会变成块级堆叠。

真实可行的方案不是“兼容所有”，而是明确支持边界：

• 用 @supports (display: grid) 包裹 Grid 样式，内部写回退的 Flex 布局
• 对 IE11，用 display: -ms-flexbox + display: flex 双声明，但注意 flex: 1 在 IE 中需写成 -ms-flex: 1
• 避免在 Grid 中混用 Float 或 position: absolute，Safari 12 之前会完全忽略 grid-area
• 测试时真机必看：iOS 12 的 gap 不支持，得用 margin 模拟；android 4.4 的 Flex 子项 min-width: 0 无效，文字溢出不换行

最常被忽略的点：viewport 设置不统一。没写 <meta name="viewport" content="width=device-width, initial-scale=1">，或写了但 initial-scale 被用户双指缩放覆盖，会导致同一份 CSS 在移动端渲染出两套像素密度。这个 bug 一旦出现，所有前面的样式努力都会白费。