CSS - 日本語のテキストが入っているときにボタンとテキスト入力が並んでいない

Question

隣り合うテキスト入力とボタンを完全に整列させたい。私は特にChromeをターゲットにしていますが、現代のすべてのブラウザでうまく機能していればそれは素晴らしいことです。

This answerはほとんど機能しますが、それでもFirefoxでは正しく整列していません。しかし、ボタンに日本語のテキストを入力すると、テキスト入力にも日本語のテキストを入力しても、高さがわずかに相殺されます。クローム54.0.2840.99、この中に結果に

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

Funnily十分な、彼らはIE 11に完全に並ぶ

がありますChromeやFirefox、Safariでこれらを完全に整列させる方法はありますか？若干の違いが私を狂ってしまう。

Answer 1

だからこれは私がここで起こる考えるものです：

1. インライン要素のデフォルトの垂直方向の配置が異なるフォントを使用する場合は、ベースラインアライメントは、フォントなどの問題を引き起こす可能性がありますvertical-align: baseline

2. ですアフェンダまたはディセンダなどのメトリックは、一部のブラウザのバージョンで調整の問題に影響することがあります。

出典：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>