blocks|key|5007984|text|尝试指定line-height:+34px或类似的内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5007985|entityMap^0|4|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Try specifying a <code>line-height: 34px</code> or thereabouts.

blocks|key|2020627|text|有一个CSS3规则：box-sizing。IE8支持此规则。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2020628|IE(包括IE8)有非标准的盒子模型，其中padding和border包含在width和height中，而其他浏览器使用标准，不包含宽度的填充和边框。它在here中有详细的描述。|2020629|通过将box-sizing设置为content-box，您可以告诉浏览器不要在宽度中包含边框和填充，如果设置为box-sizing:+border-box，则所有浏览器都将在宽度中包含边框和填充。这样或那样，显示将在所有现代浏览器上保持一致(并不是说IE8很现代，但它也支持这一规则:)。|2020630|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/CSS/box-sizing|1|http://css-tricks.com/box-sizing/^0|A|A|A|A|0|0|L|7|T|6|12|5|18|6|25|4|1|0|3|A|G|B|1J|M|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|H|3|I|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

There is a CSS3 rule: the <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" rel="noreferrer"><code>box-sizing</code></a>. This rule is supported by IE8.

The IEs(including IE8) have non-standard box model, where <code>padding</code> and <code>border</code> are included into <code>width</code> and <code>height</code> whereas other browsers go with standard and don't include padding and border into width . It is described in detail <a href="http://css-tricks.com/box-sizing/" rel="noreferrer">here</a>. 
By setting the <code>box-sizing</code> to <code>content-box</code> you tell the browsers not to include border and padding into width, and if you set <code>box-sizing: border-box</code>, 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 :).

blocks|key|5008000|text|我必须设置行高和display:+inline。不知道为什么，但它对我很有效。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5008001|entityMap^0|8|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|5007954|text|是否设置搜索输入字段#q的行高属性？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5007955|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|5008151|text|尝试以IE8及以下为目标设置行高，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5008152|line-height:+32px\9;|code-block|syntax|javascript|5008153|line-height的值应该等于input的高度，\9将以IE8或更低的高度为目标。|offset|length|style|CODE|5008154|entityMap^0|0|0|0|B|Q|2|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Try setting a line-height targeting IE8 and below, like this:

<pre><code>line-height: 32px\9;
</code></pre>

<code>line-height</code> value should be equal to input's height and <code>\9</code> will target IE8 and below.

blocks|key|2020634|text|输入的位置应为position:absolute;，以便line-height:37px;和display:inline;正常工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2020635|entityMap^0|7|I|S|H|1A|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|5008113|text|我在这方面遇到了很多麻烦，最后我解决了它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5008114|对于ex。你设置|5008115|++INPUT+{
+++line-height:+44px
}|code-block|syntax|javascript|5008116|还有..。|5008117|++INPUT:focus+{
++++line-height:+45px
+}|5008118|这个...f..。像素造成了不同(焦点应该比平时多%2B1px+)，现在你的光标在IE8处的位置很好。|5008119|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I had much trouble with that, and finally i resolved it:

for ex. you set

<pre><code> INPUT {
 line-height: 44px
}
</code></pre>

and...

<pre><code> INPUT:focus {
 line-height: 45px
 }
</code></pre>

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.

blocks|key|5008175|text|只需使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5008176|line-height:+34px!important;
height:+34px;|code-block|syntax|javascript|5008177|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just use

<pre><code>line-height: 34px!important;
height: 34px;
</code></pre>

blocks|key|3408048|text|我还不能评论，Matthew的答案对我很有效，但如果人们想要一个只有IE的包装器，而不需要搜索其他任何地方：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3408049|@media+all+and+(-ms-high-contrast:+none),+(-ms-high-contrast:+active)+{
++++line-height:+20px;
}|code-block|syntax|javascript|3408050|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I can't comment yet, Matthew's answer worked for me, but in case people wanted an IE-only wrapper without searching anywhere else:

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

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

<img src="https://i.stack.imgur.com/ok2jh.jpg" alt="Firefox, Safari and Chrome">

Internet Explorer 8

<img src="https://i.stack.imgur.com/PauhF.jpg" alt="Internet Explorer 8">

<pre><code> &lt;form action="" method="get"&gt;
 &lt;input id="q" name="q" type="text"&gt;
 &lt;input id="s" name="s" type="submit" value="Sök"&gt;
 &lt;/form&gt;

#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;
}
</code></pre>

Css style problems on input in IE8

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

在Internet Explorer8中，我无法正确显示输入中的文本。Firefox、Safari和Chrome都显示相同的内容。Firefox、Safari和Chrome​​Internet Explorer 8​​ <form action="" method="get"> <input id="q" name="q" type="text"> <input id

问IE8中输入的Css样式问题
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE8中输入的Css样式问题EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE8中输入的Css样式问题
EN