包含日文文本时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>