瀏覽器之間div中文本的垂直對齊方式的差異

Question

我的html中有一個div，如下所示：

<div class="questInfo">
   <div class="questBounty">100</div>
</div>

和CSS：

.questInfo {
  background-color: #fcfcfb;
  padding: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  position: relative;
}

.questBounty {
  position: absolute;
  right: 10px;
  font-family: 'Helvetica';
  font-weight: bold;
  background-color: #ffedcc;
  font-size: 40px;
  padding: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  border: 1px solid #808080;
}

當我在Safari中查看此內容時，將得到以下預期的結果：

但是在Firefox中，文本似乎被推上了：

我應該設置一些屬性來實現前者嗎？

小提琴。

謝謝。

Answer 1

我真的不認為這可以解決，但是請嘗試在CSS中添加-moz-這是對Firefox的支持

-moz-border-radius

-WebKit-已提供對safari的支持，所以我認為這應該適用於Firefox