Question

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

在我的Google Chrome中，元素高度为25像素。

在我的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

根据需要添加行高：值。

它将解决问题。我通过修改你的笔来检查。

跨浏览器的css差异

2 个答案: