Text baseline different on IE

Question

I have the following CSS to control three a tags which should have vertically central text, however they appear at the top of the button. It's easier to see result.

CSS Code:

color: #fffae6;
border: 1px solid #fff;
outline: 4px solid #242424;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
padding: 5px 0;
-webkit-transition: background 500ms ease-in-out;
background: #242424;
font-size: 1.7em;
display: block;
margin: 0 15px;

In chrome:

In IE:

Any ideas?

Answer 1

you have to use both the height and line-height property to achieve the same effect in IE.

Check the DEMO.

Answer 2

Please use line-height, as per your height of the button. I hope it will work