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中，而其他浏览器则使用标准版不包括填充和边框宽度。详细描述here 通过将box-sizing设置为content-box，您可以告诉浏览器不要将边框和填充包含在宽度中，如果设置box-sizing: border-box，则所有浏览器都将包含边框和填充宽度。这个或者这个，显示将在所有现代浏览器中保持一致（不是说IE8是如此现代，但它也支持这个规则:)。

Answer 3

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

Answer 4

为搜索输入字段#q？

设置行高属性

Answer 5

尝试设置行高目标IE8及以下，如下所示：

line-height: 32px\9;

line-height值应等于输入的高度，\9将定位到IE8及以下。

Answer 6

输入的位置应为position:absolute;，以便line-height:37px;和display:inline;能够正常工作。

Answer 7

我遇到了很多麻烦，最后我解决了它：

代表。你设置

  INPUT {
   line-height: 44px
}

和...

  INPUT:focus {
    line-height: 45px
 }

这一个... f ...像素有所不同（焦点比正常情况多+ 1px）现在你的光标在IE8处于良好的位置。

Answer 8

只需使用

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

Answer 9

我无法发表评论，马修的答案对我有用，但万一人们想要一个只有IE的包装而不在其他任何地方搜索：

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