LINE-HEIGHT不正是使用Chrome

垂直居中

<div id="submitHolder"> 
    <input type="submit" value=""> 
</div> 

#submitHolder { 
    background-color: #FF0000; 
    line-height: 124px; 
    text-align: center; 
} 
input[type="submit"] { 
    background-image: url("http://icons.iconarchive.com/icons/hopstarter/button/256/Button-Next-icon.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    border: 0 none; 
    height: 44px; 
    width: 194px; 
}

http://jsfiddle.net/BLPE7/4/LINE-HEIGHT不正是使用Chrome

，你可以看到，恰恰是與Firefox垂直居中，但與鉻。如何解決它？

來源

2014-01-16 John Smith

您還可以使用填充。檢查了這一點：http://jsfiddle.net/tDj2U/1/

#submitHolder { 
    background-color: #FF0000; 
    /*line-height: 124px;*/ 
    padding: 40px 0; 
    text-align: center; 
} 
input[type="submit"] { 
    background-image: url("http://icons.iconarchive.com/icons/hopstarter/button/256/Button-Next-icon.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    border: 0 none; 
    height: 44px; 
    width: 194px; 
}

來源

2014-01-16 09:14:13

填充是我在Google Chrome瀏覽器中解決此問題的方式。 –

是的，對於鉻值大的line-height值有這樣的問題。我通過adding位置絕對/相對和利潤中心解決你的情況這個問題：

#submitHolder { 
    background-color: #FF0000; 
    height: 124px; 
    text-align: center; 
    position: relative; 
} 
input[type="submit"] { 
    background-image: url("http://icons.iconarchive.com/icons/hopstarter/button/256/Button-Next-icon.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    border: 0 none; 
    height: 44px; 
    width: 194px; 
    position:absolute; 
    left: 50%; 
    top: 50%; 
    margin: -22px 0 0 -97px; 
}

來源

2014-01-16 09:11:53 Pinal

這個問題似乎發生，因爲你的提交按鈕有一個空值 - 看起來像鉻弄亂的東西了行高即可。有一次，我給它一個值，如果它甚至只是一個空格字符（和爲此仍然不可見），問題就會消失：