javascript - CSS - 按钮和文本输入在包含日语文本时不对齐

Question

我希望相邻的文本输入和按钮完美对齐。我专门针对 Chrome，但如果它能在所有现代浏览器中运行就更好了。

This answer几乎可以工作，尽管它在 Firefox 中仍然不正确。但是，如果我在按钮中输入日语文本，高度会稍微偏移，即使我也在文本输入中输入日语文本也是如此。

div {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  padding: 0.5em;
}

label, input, button {
  font-size: inherit;
  height: 1.2em;
  padding: 0.2em;
  margin: 0.1em 0.1em;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

<form action="#" method="post">
  <div>
    <input type="text" name="something" id="something" value="This works" />
    <button>just fine</button>
  </div>
</form>
<form action="#" method="post">
  <div>
    <input type="text" name="something" id="something" value="あ This" />
    <button>あ doesn't line up!</button>
  </div>
</form>

( JSFiddle ) 在 Chrome 54.0.2840.99 上，结果如下:

有趣的是，它们在 IE 11 中完全一致。

有没有一种方法可以在 Chrome 中完美对齐这些内容，最好也可以在 Firefox 和 Safari 中对齐？细微的差别让我发疯。

Answer 1

所以这就是我认为这里发生的事情:

1. 内联元素的默认垂直对齐方式是vertical-align: baseline

2. 当使用不同的字体时，baseline 对齐会导致问题，因为 ascenders 或 descenders 等字体指标会影响对齐某些浏览器版本中的问题。

来源:wikipedia

因此，我的猜测是，如果您使用其他字体，vertical-align: middle 将节省您的时间。

div {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  padding: 0.5em;
}

label, input, button {
  font-size: inherit;
  height: 1.2em;
  padding: 0.2em;
  margin: 0.1em 0.1em;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  vertical-align:middle;
}

<form action="#" method="post">
  <div>
    <input type="text" name="something" id="something" value="This works" />
    <button>just fine</button>
  </div>
</form>
<form action="#" method="post">
  <div>
    <input type="text" name="something" id="something" value="あ This" />
    <button>あ doesn't line up!</button>
  </div>
</form>