Cross-browser difference in css

Question

I have a problem where my element looks different in each browser.

In my Google Chrome, the elements height is 25px.

In my Mozilla Firefox, the elements height is 27px.

In my friends Mozilla Firefox, the elements height is 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;
}

Here is a pen where you can see the code: http://codepen.io/Mathias_/pen/PGYaRd

How can I make sure this is the same height across all browsers?

Please note: I use some javascript functionality on it, and would therefore like to avoid setting a height attribute

Answer 1

Simply set the height to the wanted value:

 .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

Just add line-height : value as per your need.

It will fix the issue. I have checked by modifying your Pen.