IE9中的CSS按鈕 - 不同的文本垂直對齊

兩個相同的標籤在IE9中有不同的對齊方式。我在http://jsfiddle.net/9B2hK/中存儲了代碼，但是當我在IE9中看到它時，兩個按鈕在6px上都有5px的intead。如果我刪除一個換行符標籤，則第二個標籤中的文本對齊將變爲OK。IE9中的CSS按鈕 - 不同的文本垂直對齊

enter image description here

我的任務幾句話。我需要按CSS樣式的按鈕。我創建了用於定位標記的.btn類，以及類型爲「submit」和「button」的輸入標記。我需要按鈕高度與文本輸入字段相同，所以我將它設置爲高度20px。另外，因爲我需要它在鉻和其他工作，我設置行高= 14px和填充= 3px頂部和底部對齊文本。我試過使用垂直對齊方式，但對於某些瀏覽器來說效果不好。但我的風格在IE9中很奇怪。我從我的頁面中刪除了不必要的標籤，這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
    body { 
     font-size: 11px; 
     font-family: Verdana, Tahoma, sans-serif 
    } 
    .btn { 
     display: inline-block; 
     line-height: 14px; 
     padding: 3px 10px 3px; 
     font-family: Verdana, Tahoma, sans-serif; 
     font-size: 11px; 
     text-align: center; 
     color: #FFFFFF; 
     background-color: #5675B5; 
     vertical-align: middle; 
    } 
</style> 
</head> 
<body> 
    <span class="btn">Search</span> 
    <br/><br/><br/><br/><br/><br/><br/> 
    <span class="btn">Search</span> 
</body> 
</html>

來源

2014-03-26 Valentina Chumak

決定降低高度爲19px並刪除行高。按鈕變得更加不對稱，但IE中的差異消失了。 –

刪除行高並使用css transform屬性。

.btn { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    padding: 3px 10px 3px; 
    font-family: Verdana, Tahoma, sans-serif; 
    font-size: 11px; 
    text-align: center; 
    color: #FFFFFF; 
    background-color: #5675B5; 
    vertical-align: middle; 
}

來源

2015-02-05 23:00:34 yulie

IE9中的CSS按鈕 - 不同的文本垂直對齊

回答

相關問題