HTML元素渲染尺寸不一致的主因是浏览器对“相同尺寸”的解析与人不同，涉及默认样式、盒模型（content-box）、字体度量、基线对齐及内置边距等隐式影响。
HTML 元素渲染尺寸不一致的常见原因
不是代码写得不对，而是浏览器对“一样大小”的理解跟人不一样。比如两个 这是最直接有效的控制手段。它让 它们不是纯容器，自身有语义和默认样式，容易破坏布局一致性。 Flex 容器里设 立即学习“前端免费学习笔记（深入）”； 真正难处理的从来不是“怎么设宽”，而是“谁在偷偷改宽”。浏览器默认样式、字体度量、基线对齐、缩放上下文……这些不会报错，但会让像素级对齐变成玄学。调试时先关掉所有自定义样式，用浏览器开发者工具逐层看 computed styles，比猜更省时间。width: 200px，但实际占位可能不同——这通常是因为默认样式、盒模型或字体度量在暗中起作用。
box-sizing 默认是 content-box，加了 padding 或 border 就会撑大总宽、）受 font-size、line-height 和父容器 vertical-align 影响，基线对齐会导致视觉错位、）有浏览器内置的 padding 和 border，且各浏览器不统一display: block 时，底部会留出空白（那是基线预留空间）用
box-sizing: border-box 统一尺寸计算逻辑width 和 height 指代的是“最终渲染出来的框”，而不是内容区大小。
*, *::before, *::after { box-sizing: border-box; }.card { width: 300px; padding: 16px; border: 1px solid #ccc; } —— 此时总宽仍是 300pxborder-box，但旧版 Android WebView 有 bug，若需兼容可加 -webkit-box-sizing
这类“自带脾气”的元素怎么压平
inline，底部留白。加 display: block 或 vertical-align: middle 即可消除：Chrome/Firefox 对 height 解释不同，建议统一用 padding + line-height 控制高度，而不是只靠 height
：部分浏览器会给它加 text-transform: none 或默认 font-family，影响行高。显式设置 font: inherit 更稳妥appearance: none（配合前缀），再手动定义尺寸和边框Flex/Grid 布局下“等宽”为什么还是看起来不齐
flex: 1 或 Grid 设 grid-template-columns: 1fr 1fr，理论上该均分，但实际可能因内容溢出、最小宽度限制或缩放行为导致偏差。
min-width: auto 是 flex item 的默认行为，文字长的项会撑开，优先级高于 flex: 1。加 min-width: 0 可解除限制word-break: break-all，也会顶破列宽zoom 或 transform: scale() 会影响渲染精度，尤其在高 DPI 屏幕上，像素对齐会偏移font-smoothing 或 -webkit-font-smoothing，抗锯齿策略不同会让文字占据的垂直空间略有差异
