文本输入将文本向下移动 1px

Question

具有相同 CSS 样式的

div

 和 

input type="text"

 其内容的位置不同。在 Firefox、Chrome 和 Safari（至少在 macOS 上）上，

input

 的文本低 1 像素。

尝试单击下面代码片段中的

toggle 作为示例。请注意，元素的位置相同，只是文本移动了 1 像素。

由于它在浏览器之间始终存在偏移，我想知道是否缺少一些东西。我怎样才能可靠地避免这个 1px 的偏移？

const button = document.getElementById('toggle');

const a = document.getElementById('a');
const b = document.getElementById('b');

let state = false;
toggle();

button.onclick = toggle;

function toggle() {
  a.style.display = state ? 'none' : '';
  b.style.display = state ? '' : 'none';
  state = !state;
}

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;
  line-height: 21px;
  display: block;
  background-color: #eee;
}

<button id="toggle">toggle</button>

<input type="text" value="abcdefghijklmnopqrstuvwxyz" id="a" />
<div id="b">abcdefghijklmnopqrstuvwxyz</div>

还有 JsFiddle

这里。

Answer 1

input

中的垂直居中受

line-height

的影响较小（文本垂直居中）。但是，

height: 22px

 和 

line-height: 21px

 导致文本在 

div

 中的居中位置不同。将行高更改为 

22px

。

注意：我在 div 中添加了红色右边框，以显示项目仍在切换状态。

const button = document.getElementById('toggle');

const a = document.getElementById('a');
const b = document.getElementById('b');

let state = false;
toggle();

button.onclick = toggle;

function toggle() {
  a.style.display = state ? 'none' : '';
  b.style.display = state ? '' : 'none';
  state = !state;
}

body {
  font: 13px Arial, sans-serif;
}

input,
div {
  position: absolute;
  outline: 0;
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  width: 200px;
  height: 22px;
  font: inherit;
  line-height: 22px;
  display: block;
  background-color: #eee;
}

div {
  border-right: 3px solid red;
}

<button id="toggle">toggle</button>

<input type="text" value="abcdefghijklmnopqrstuvwxyz" id="a" />
<div id="b">abcdefghijklmnopqrstuvwxyz</div>

Answer 2

“高度”属性是导致输入垂直移动的原因。要确定输入高度，需要使用行高、内边距和边框。

要检查，请附加到代码片段：

input {
  height: unset;
}