reset.css是最常用有效的办法，它通过统一box-sizing为border-box、重置margin/padding为0、声明基础属性等，抹平浏览器默认样式及盒模型差异。
直接用 reset.css 是最常用也最有效的办法，它能抹平不同浏览器默认样式（包括盒模型计算方式）的差异，让 margin、padding、box-sizing 等从同一起点开始工作。
为什么盒模型表现不一致
老版本 IE（IE6/7）用的是 怪异盒模型（quirks mode）：width / height 包含 padding 和 border；而标准浏览器（Chrome/Firefox/Safari/现代 IE）默认用 标准盒模型：width / height 仅指 content 区域。如果页面触发了怪异模式，或某些元素被设为 box-sizing: border-box 但未全局统一，就容易出现尺寸错位。
reset.css 怎么解决这个问题
主流 reset 方案（如 Eric Meyer Reset 或 Normalize.css + 自定义重置）会做这几件事：
- 把所有元素的
box-sizing统一设为border-box（更符合直觉，推荐） - 重置
margin和padding为0，避免浏览器默认值干扰布局 - 强制声明
html和body的字体、行高、尺寸等基础属性 - 禁用部分元素的默认样式（如
button的边框、input的内边距等）
推荐写法：轻量级自定义 reset 片段
不必引入整套 reset.css，可直接在 CSS 开头加这段（兼容性好，覆盖主流场景）：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote {
margin: 0;
}
ul, ol {
padding: 0;
list-style: none;
}
img, picture, video {
max-width: 100%;
display: block;
}
额外建议：配合现代开发习惯
- 在
标签上加上lang属性和viewportmeta，防止移动端触发怪异模式 - 用
display: flex或display: grid布局时，box-sizing 差异影响变小，但仍建议统一 - 调试时打开浏览器开发者工具的“layout”面板，直接看元素实际 content/padding/border 尺寸，比猜更准
基本上就这些。reset 不是万能，但它把“为什么在 Chrome 正常、在 Safari 错位”这类问题挡在了第一步外面。
