IE8中输入的CSS样式问题
我在使输入中的文本在 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;
}
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
尝试指定
line-height: 34px或类似值。Try specifying a
line-height: 34pxor thereabouts.有一个 CSS3 规则：
盒子大小。 IE8支持该规则。IE（包括IE8）具有非标准盒子模型，其中
padding和border包含在width和height 而其他浏览器则采用标准，并且不将 padding 和 border 添加到 width 中。 此处对此进行了详细描述。通过将
box-sizing设置为content-box，您可以告诉浏览器不要将边框和填充包含在宽度中，并且如果您设置box-sizing: border- box，所有浏览器都会将边框和内边距包含在宽度中。这样或那样，所有现代浏览器的显示将是一致的（并不是说 IE8 如此现代，但它也支持这个规则:)。There is a CSS3 rule: the
box-sizing. This rule is supported by IE8.The IEs(including IE8) have non-standard box model, where
paddingandborderare included intowidthandheightwhereas other browsers go with standard and don't include padding and border into width . It is described in detail here.By setting the
box-sizingtocontent-boxyou tell the browsers not to include border and padding into width, and if you setbox-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 :).我必须设置行高和
display: inline。不知道为什么，但它对我有用。I had to set the line-height and
display: inline. No idea why, but it worked for me.为搜索输入字段设置行高属性#q？
Set a line-height property for search input field #q?
尝试设置针对 IE8 及更低版本的行高，如下所示：
line-height值应等于输入的高度，并且\9将针对 IE8 及更低版本。Try setting a line-height targeting IE8 and below, like this:
line-heightvalue should be equal to input's height and\9will target IE8 and below.输入的位置应为
position:absolute;才能使line-height:37px;和display:inline;正常工作。The position of input should be
position:absolute;in order forline-height:37px;anddisplay:inline;to work.我对此遇到了很多麻烦，最后我解决了：
例如。你设置
并且...
这个...f...像素产生了差异（焦点应该比正常多+1px），现在你的光标在IE8中处于正确的位置。
I had much trouble with that, and finally i resolved it:
for ex. you set
and...
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
我还不能发表评论，马修的回答对我有用，但如果人们想要一个仅 IE 的包装器而不在其他地方搜索：
I can't comment yet, Matthew's answer worked for me, but in case people wanted an IE-only wrapper without searching anywhere else: