CSS line-height issue across browsers

Question

I have some button controls with CSS line-height: 18px. Some are input controls type="button", and others are anchors stylized to appear as buttons like the input controls. In FF3.6.12/IE8 they are displaying the same height, but in IE7, the anchors are shorter in height. How do I get them to display correctly in IE7?

Answer 1

Buttons in IEs have additional padding/borders/whatever - they do not style well as in other browsers.

Answer 2

I took your demo: http://jsfiddle.net/DnGvF/

and added just this CSS at the end: http://jsfiddle.net/gRF9g/

/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
    overflow: visible;
    *height: 24px;
    *line-height: 15px
}

Some explanation of what's going on there:

• There's a known bug in IE7 that overflow: visible fixes, related to the width of the button. Try looking at my demo in IE7 with and without it.
• I'm using the Star property hack to provide change the height and line-height for only IE7 and lower. You can tweak the numbers I picked if you need to.
• That hack is invalid CSS, but there's no problem using it. It's never going to come back and bite you - it's a "safe hack". Nevertheless, if you require 100% valid CSS, there are alternatives.

It now looks consistent between IE7 and the later versions.

Yes, this is a little kludgy, but at least it's all together in the CSS in one place, with a clear comment.

Answer 3

Honestly, if IE7 is the only problem, I'd just go with a hack and bump up the line-height:

*+html .button { line-height:24px }

If you use something like Modernizr, you could do away with the hack and use:

.ie7 .button { line-height:24px }

Of course, the other alternative is to actually track down why IE7 is behaving the way it is, and rewrite your CSS accordingly, but without any posted code, I can't help you with that.

EDIT: Forgot about this method of targeting just IE7:

<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->