異なるフォントを持つ3つのボタンは、

問題は、フォントファミリをbitalicから削除すると、それが均等に配置されているよりも、 I ボタンの方が少し低い(特にchromeで)

 <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;    
}
0

3 答え

私は要素をhorisontally正しく整列させる最も一般的な解決策は、CSSの浮動小数点数を使用することだと思う:left:

.bbold, .bitalic, .bcode
{
    float: left;
    height: 30px;
    min-width: 30px;
}
1
追加された

すべてのボタンでline-heightを30pxに設定してください。通常はこれを修正する必要があります:

.bbold, .bitalic, .bcode
{
    height: 30px;
    min-width: 30px;
    line-height: 30px;
}
1
追加された

font-style を変更すると、それをレンダリングするのに必要なスペースと寸法が変更されます。

text-align:text-bottom;を設定すると解決するはずです。

1
追加された