CSS - button and text input do not line up if they contain Japanese text

Question

I want the adjacent text input and button to line up perfectly. I am specifically focused on Chrome, although it would be nice if it worked in all modern browsers.

This answer almost works, although it still is not suitable for Firefox. However, if I enter Japanese text in a button, the height shifts slightly, even if I enter text in Japanese text as well.

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>

Run codeHide result

( JSFiddle ) In Chrome 54.0.2840.99 the result is:

Oddly enough, they line up fine in IE 11.

Is there a way to align them correctly in Chrome, and also preferably in Firefox and Safari? A little difference is driving me crazy.

Answer 1

:

• vertical-align: baseline

• , , , .

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

Hide result