CSSのクロスブラウザの相違

Question

私の問題は、各ブラウザで異なって見えることがあります。

私のGoogle Chromeでは、要素の高さは25pxです。

私のMozilla Firefoxでは、要素の高さは27pxです。

私の友人のMozilla Firefoxでは、要素の高さは26.7pxです。

HTML：

<div class="quantityDiscountStreamer" style="opacity: 0.75;"> 
    Discount 
    <span class="quantityDiscountStreamerPrice" style="display: inline;">: From $41.00</span> 
</div> 

はCSS：

.quantityDiscountStreamer { 
    text-align: center; 
    vertical-align: middle; 
    padding: 3px 0 3px 0; 
    border-top: 1px solid #c44f1a; 
    border-radius: 0px; 
    background: #ff812a; 
    width: 100%; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ff812a), to(#c44f1a)); 
    background: -moz-linear-gradient(top, #ff812a, #c44f1a); 
    background: linear-gradient(to bottom, #ff812a, #c44f1a); 
    text-shadow: #7b3210 1px 1px 1px; 
    font: normal normal bold 16px arial; 
    text-decoration: none; 
    opacity: 0.75; 
    filter: alpha(opacity=75); 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    color: #ffffff; 
    cursor: pointer; 
} 

ここでは、コードを見ることができるペンです：http://codepen.io/Mathias_/pen/PGYaRd

は、どのように私はこれが同じ高さであることを確認することができますすべてのブラウザで使用できますか？

ご注意：私はそれにいくつかのjavascript機能を使用するため、高さを設定しないようにしたいだけで、希望の値に高さ設定

Answer 1

属性：

.quantityDiscountStreamer { 
 
    height: 25px; /* the height you want */ 
 
    display: inline-block; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    padding: 3px 0 3px 0; 
 
    border-top: 1px solid #c44f1a; 
 
    border-radius: 0px; 
 
    background: #ff812a; 
 
    width: 100%; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#ff812a), to(#c44f1a)); 
 
    background: -moz-linear-gradient(top, #ff812a, #c44f1a); 
 
    background: linear-gradient(to bottom, #ff812a, #c44f1a); 
 
    text-shadow: #7b3210 1px 1px 1px; 
 
    font: normal normal bold 16px arial; 
 
    text-decoration: none; 
 
    opacity: 0.75; 
 
    filter: alpha(opacity=75); 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
}

<div class="quantityDiscountStreamer" style="opacity: 0.75;"> 
 
    Discount 
 
    <span class="quantityDiscountStreamerPrice" style="display: inline;">: From $41.00</span> 
 
</div>

Answer 2

必要に応じて、線の高さ：値を追加するだけです。

これで問題が解決されます。私はあなたのペンを変更してチェックしました。