3個按鍵具有不同的字體垂直對齊不同

Question

的問題是，I按鈕保持低一點（特別是在鍍鉻），如果我從bitalic刪除FONT-FAMILY比它同樣

<div> 
    <button type="button" onclick="ab('*');" class="bbold">B</button> 
    <button type="button" onclick="ab('_');" class="bitalic">I</button> 
    <button type="button" onclick="ab('code');" class="bcode">{code}</button> 
</div> 

---

對齊

.bbold, .bitalic, .bcode 
{ 
    height: 30px; 
    min-width: 30px; 
} 
.bbold { 
    font-weight: bold;   
} 
.bitalic 
{ 
    font-family: "Times New Roman"; 
    font-style: italic; 
    font-weight: bold;   
} 
.bcode 
{ 
    font-family: consolas, courier;  
} 

Answer 1

我認爲最常見的解決方案，使元素排隊正確horisontally是使用CSS的float：左：

.bbold, .bitalic, .bcode 
{ 
    float: left; 
    height: 30px; 
    min-width: 30px; 
} 

Answer 2

嘗試將行高設置爲30像素上的所有按鈕，這通常應該修復它：

.bbold, .bitalic, .bcode 
{ 
    height: 30px; 
    min-width: 30px; 
    line-height: 30px; 
} 

Answer 3

更改font-style改變，以使其與標註所需的空間。

設置text-align:text-bottom;應該解決它。