Line-height and font-size on different browsers?

Question

I'm trying to vertically align a number in a div. Here's the code :

<div class="nb">2</div> 

display: inline-block;
height: 56px;
width: 56px;
background: transparent url("../img/stepnb.png") center center no-repeat;
line-height: 56px;
color: #255066;
text-shadow: 1px 1px 3px rgba(255,255,255,.75), -1px -1px 2px rgba(0,0,0,0.75);
font-size: 42px;
font-weight: bold;
margin-top: -25px;

note : the result is the same on IE9 to 11

As you can see, it's not vertically centered on different browsers. Do you have an idea how I could achieve to align it on all major browsers without conditionnal comments or css hacks?

edit: the issue could come from the use of a css reset, I'll check that.

edit 2 : The alignment issue came from the "Myriad pro" font, which was assigned to a parent div.

Answer 1

The alignment issue came from the "Myriad pro" font, which was assigned to a parent div.

Thank you all for the help :)