IE8中输入的CSS样式问题

Question

我在输入中的文本在Internet Explorer 8中显示正确时遇到问题.Firefox,Safari和Chrome都显示相同的内容.

Firefox,Safari和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

尝试指定一个line-height: 34px或那附近.

Answer 2

有一个CSS3规则:box-sizing.IE8支持此规则.

IE(包括IE8)具有非标准的盒子模型,其中padding和border包含在其中width,height而其他浏览器使用标准,并且不包括填充和边框到宽度.这里将详细描述.
通过设置box-sizing为content-box你告诉浏览器不要包含边框和填充到宽度,如果你设置box-sizing: border-box,所有浏览器将包括边框和填充宽度.这个或者这个,显示器将在所有现代浏览器中保持一致(不是说IE8是如此现代,但它也支持这个规则:).

Answer 3

我必须设置行高和 display: inline.不知道为什么,但它对我有用.