Css style problems on input in IE8

I have a problem getting the text in an input to show correct in Internet Explorer 8. Firefox, Safari and Chrome all show the same.

Firefox, Safari and Chrome

Internet Explorer 8

    <form action="" method="get">
       <input id="q" name="q" type="text">
       <input id="s" name="s" type="submit" value="Sök">
    </form>

#q {
    background:url(../../image_layout/search_field.png) no-repeat;
    width:209px;
    height:32px;
    padding:0 5px 0 5px;
    text-align:left;
    margin:0;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#09305b;
    font-weight:bold;
    position:absolute;
    left: 0px;
    top: 19px;
}
#s {
    background:url(../../image_layout/serach_buttom.png) no-repeat;
    width:56px;
    height:34px;
    padding:0开发者_运维百科;
    margin:0;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    border:0;
    position:absolute;
    left: 225px;
    top: 17px;
}

Try specifying a line-height: 34px or thereabouts.

There is a CSS3 rule: the box-sizing. This rule is supported by IE8.

The IEs(including IE8) have non-standard box model, where padding and border are included into width and height whereas other browsers go with standard and don't include padding and border into width . It is described in detail here.
By setting the box-sizing to content-box you tell the browsers not to include border and padding into width, and if you set box-sizing: border-box, all browsers will include border and padding into width. This or this, the display will be consistent across all modern browsers(not that IE8 is so modern, but it supports this rule too :).

I had to set the line-height and display: inline. No idea why, but it worked for me.

Set a line-height property for search input field #q?

Try setting a line-height targeting IE8 and below, like this:

line-height: 32px\9;

line-height value should be equal to input's height and \9 will target IE8 and below.

The position of input should be position:absolute; in order for line-height:37px; and display:inline; to work.

I had much trouble with that, and finally i resolved it:

for ex. you set

  INPUT {
   line-height: 44px
}

and...

  INPUT:focus {
    line-height: 45px
 }

this one...f... pixel makes the difference (focus shoud have +1px more than normal) and now you have your cursor in good position at IE8.

Just use

line-height: 34px!important;
height: 34px;

I can't comment yet, Matthew's answer worked for me, but in case people wanted an IE-only wrapper without searching anywhere else:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    line-height: 20px;
}