3个不同字体的按钮垂直对齐不同

Question

问题是I按钮保持稍低（特别是在chrome中），如果我从bitalic中移除字体系列而不是同等对齐

 <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

尝试在所有按钮上将行高设置为30px，这通常应该修复它：

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

Answer 2

我认为使元素水平排列的最常见解决方案是使用CSS float：left：

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

Answer 3

更改font-style会更改渲染所需空间和尺寸标注。

设置text-align:text-bottom;应该解决它。