同CSS样式的div与text输入框文本偏移1px？如何规避？

这个问题我之前踩过一模一样的坑！明明把所有能重置的样式都拉平了，input里的文本偏偏就是比div低1px，而且Chrome、Firefox、macOS Safari还都一致出现这个情况——其实这是因为浏览器对表单元素（属于替换元素）和普通块级元素的文本渲染逻辑藏着细微差异，哪怕你重置了appearance、padding这些属性，内部的默认对齐规则还是没完全覆盖。

下面给你几个可靠的解决办法，按推荐程度排序：

1. 用Flexbox强制垂直居中（最推荐） #

Flexbox的垂直对齐是基于容器的，不管元素类型，直接强制内部内容居中，从根源上消除差异。修改你的CSS：

body {
 font: 13px Arial, sans-serif;
}
input, div {
 position: absolute;
 outline: 0;
 border: 0;
 padding: 0;
 margin: 0;
 appearance: none;
 vertical-align: baseline;
 width: 200px;
 height: 22px;
 font: inherit;
 /* 核心修改：用flex布局实现垂直居中 */
 display: flex;
 align-items: center;
 background-color: #eee;
}

这个方法兼容性极好，所有主流浏览器都完美支持，而且不需要纠结行高、字体基线这些容易踩坑的细节。

2. 重置行高+用padding控制垂直空间 #

如果不想用Flexbox，也可以把line-height设为normal，然后用padding替代固定height，让元素高度由内容+padding决定，避免不同元素对行高的计算差异：

body {
 font: 13px Arial, sans-serif;
}
input, div {
 position: absolute;
 outline: 0;
 border: 0;
 /* 用padding控制垂直位置，上下各3px，总高度和原来的22px一致 */
 padding: 3px 0;
 margin: 0;
 appearance: none;
 vertical-align: baseline;
 width: 200px;
 /* 去掉固定height，让内容自适应 */
 font: inherit;
 line-height: normal;
 display: block;
 background-color: #eee;
}

这种方法兼容性覆盖更老的浏览器，只是需要微调padding值来匹配你想要的高度。

3. 临时hack：相对位置偏移（不推荐长期用） #

如果只是临时应急，不想改整体布局，可以给input加个相对位置偏移，但这是针对特定场景的hack，换字体或字号可能失效：

input {
 position: relative;
 top: -1px;
}

为什么会出现这个问题？ #

简单来说，浏览器对<input>这类表单元素的文本渲染，是基于内部的一个“输入框容器”，而<div>是基于行盒的基线。即使你重置了所有可见样式，浏览器内部的默认对齐规则还是会给input的文本留一点微小偏移，这是历史遗留的渲染差异。

内容的提问来源于stack exchange，提问作者Max