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: Chrome's intepretation

In IE: IE's interpretation

Any ideas?

Anchor tags, sorry I did mention in OP, " to control three `a` tags". — Stefan Dunn, May 02 '14 at 15:39
I think you'll have to specify more css ...Here this is what I created ...seems good to me : http://jsfiddle.net/aYtyx/ — Ani, May 02 '14 at 15:44

score 1 · Accepted Answer · answered May 02 '14 at 16:47

1

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

Check the DEMO.

answered May 02 '14 at 16:47

Kheema Pandey

9,977
4
25
26

Is my solution helpful for you? – Kheema Pandey May 02 '14 at 17:07
Thank you, that did the trick although different versions of IE seem to render line heights differently so I've had to create more than one IE specific css stylesheet for the different versions of IE to set the different line-heights and heights. – Stefan Dunn May 07 '14 at 11:02

score 0 · Answer 2 · answered May 02 '14 at 15:31

0

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

answered May 02 '14 at 15:31

Gaurav Gagan

59
1
1
10

I have tried this, it only adds more space at the top and bottom so the text still remains in the top part of the button. Seems fine in IE8, but not IE11. – Stefan Dunn May 02 '14 at 15:38

Text baseline different on IE

2 Answers2