包含日文文本時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. 當使用不同的字體，在基線對準可能會導致問題的字體指標如上升者或下行者可能會影響某些瀏覽器版本中的對齊問題。

來源：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>