Css style problems on input in IE8 - html

Question

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;
}

Answer 1

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

Answer 2

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 :).

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

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;
}