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

Question

具有相同 CSS 样式的 div 和 input type="text" 以不同方式定位其内容。 input 在 Firefox、Chrome 和 Safari（至少在 macOS 上）上的文本低 1px。

尝试点击下面代码段中的 切换 作为示例。请注意，元素的位置相同，只是其中的文本移动了 1px。

由于它在浏览器中始终存在偏差，我想知道是否遗漏了什么。我怎样才能可靠地避免这种 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 上 here。

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>

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

Text input shifts text down 1px

css

cross-browser