Html IE8 中输入的 CSS 样式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5258802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css style problems on input in IE8
提问by jamietelin
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.
我在获取输入中的文本以在 Internet Explorer 8 中正确显示时遇到问题。Firefox、Safari 和 Chrome 都显示相同的内容。
Firefox, Safari and Chrome
火狐、Safari 和 Chrome
Internet Explorer 8
浏览器 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;
}
回答by Matthew Abbott
Try specifying a line-height: 34pxor thereabouts.
尝试指定 aline-height: 34px或附近。
回答by Shimon Rachlenko
There is a CSS3rule: the box-sizing. This rule is supported by IE8.
有一个CSS3规则：box-sizing. IE8 支持此规则。
The IEs(including IE8) have non-standard box model, where paddingand borderare included into widthand heightwhereas other browsers go with standard and don't include padding and border into width . It is described in detail here.
By setting the box-sizingto content-boxyou 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 :).
IE（包括 IE8）具有非标准框模型，其中padding和border包含在width和 中，height而其他浏览器采用标准并且不将填充和边框包含在 width 中。在这里详细描述。
通过将 设置box-sizing为content-box您告诉浏览器不要在宽度中包含边框和内边距，如果您设置为box-sizing: border-box，则所有浏览器都将在宽度中包含边框和内边距。这样或这样，显示将在所有现代浏览器中保持一致（不是 IE8 如此现代，但它也支持此规则:)。
回答by bergie3000
I had to set the line-height anddisplay: inline. No idea why, but it worked for me.
我必须设置行高和display: inline. 不知道为什么，但它对我有用。
回答by Munim
Set a line-height property for search input field #q?
为搜索输入字段#q 设置行高属性？
回答by Paul Eduard Stanciu
Try setting a line-height targeting IE8 and below, like this:
尝试设置针对 IE8 及以下的行高，如下所示：
line-height: 32px;
line-heightvalue should be equal to input's height and \9will target IE8 and below.
line-height值应等于输入的高度，\9并将针对 IE8 及以下。
回答by keen
The position of input should be position:absolute;in order for line-height:37px;and display:inline;to work.
输入的位置应该是position:absolute;为了line-height:37px;和display:inline;工作。
回答by sinner
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.
这个...f... 像素有所不同（焦点应该比正常情况多 +1px），现在您的光标在 IE8 上处于良好的位置。
回答by arkasha69
Just use
只需使用
line-height: 34px!important;
height: 34px;
回答by suzumakes
I can't comment yet, Matthew's answer worked for me, but in case people wanted an IE-only wrapper without searching anywhere else:
我还不能发表评论，马修的回答对我有用，但万一人们想要一个仅限 IE 的包装器，而无需在其他任何地方搜索：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
line-height: 20px;
}
