html - css 跨浏览器差异

Question

我有一个问题，我的元素在每个浏览器中看起来都不一样。

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

这是一支笔，您可以在其中看到代码: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>