如何通过设置box-sizing和调整line-height解决输入框高度在不同浏览器显示不一致的问题？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1008个文字，预计阅读时间需要5分钟。
直接给 `` 和 `` 同时设置 `box-sizing: border-box` 和 `line-height`，是目前最稳定、兼容性最好、无需 JS 干预的解决方案。其他依赖 `vertical-align` 或浮动排列的方式，在现代布局中已不再可靠。
为什么 box-sizing: border-box 是必须的
浏览器对 input 和 button 的默认 box-sizing 不一致：Chrome/Safari 中 button 默认是 border-box，而 input[type="text"] 默认是 content-box。这意味着同样写 height: 40px; padding: 8px; border: 1px solid，input 实际占用高度是 40 + 2×8 + 2×1 = 58px，button 却刚好是 40px —— 差值就出来了。
本文共计1008个文字，预计阅读时间需要5分钟。
直接给 `` 和 `` 同时设置 `box-sizing: border-box` 和 `line-height`，是目前最稳定、兼容性最好、无需 JS 干预的解决方案。其他依赖 `vertical-align` 或浮动排列的方式，在现代布局中已不再可靠。
为什么 box-sizing: border-box 是必须的
浏览器对 input 和 button 的默认 box-sizing 不一致：Chrome/Safari 中 button 默认是 border-box，而 input[type="text"] 默认是 content-box。这意味着同样写 height: 40px; padding: 8px; border: 1px solid，input 实际占用高度是 40 + 2×8 + 2×1 = 58px，button 却刚好是 40px —— 差值就出来了。