Geek asks and answers

CSS line height issue in browsers

I have button control buttons with CSS line height: 18 pixels. Some of them are type = "button" input controls, while others are bindings styled to be displayed as buttons, such as input controls. In FF3.6.12 / IE8 they are displayed the same height, but in IE7 the anchors are shorter in height. How can I display them correctly in IE7?

+3
source share
3 answers

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

and added exactly 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 is going on there:

  • IE7 , overflow: visible, . IE7 .
  • Star, height line-height IE7 . , , .
  • CSS, . - " ". , 100% CSS, .

IE7 .

, kludgy, CSS .

+3

, IE7 - , :

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

- Modernizr, :

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

, - , IE7 , , CSS , - .

EDIT: IE7:

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

Buttons in IE have an extra padding / borders / whatever - they don't style well, as in other browsers.

0
source

More articles: