CSS - 按钮和文本输入在包含日文文本时不会排列

Question

我想要一个相邻的文本输入和按钮完美排列。我专门针对Chrome浏览器，但如果它适用于所有现代浏览器，那将会非常棒。

This answer几乎可以正常运行，但它仍然没有在Firefox中排队。但是，如果我在按钮中输入日文文本，即使我在文本输入中输入日文文本，高度也会稍微偏移。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

（JSFiddle） 在Chrome 54.0.2840.99上，结果如下：

有趣的是，它们在IE 11中完美排列。

有没有办法在Chrome中完美地对齐这些内容，最好也在Firefox和Safari中？微小的差异让我发疯。

Answer 1

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

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

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



来源：wikipedia

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

＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;