浏览器之间div中文本的垂直对齐方式的差异

Question

I have a div in my html as follows:

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

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

When I view this in Safari, I get the following, as I intended:

But in Firefox, the text appears to be pushed up:

Is there some attribute I should have set to achieve the former?

A fiddle.

Thanks.

Answer 1

I don't really think this can solve but try adding the -moz- in ur CSS That's support for Firefox

-moz-border-radius

-WebKit - has given support for safari so I think this should give for Firefox