在 IE8 中输入的 CSS 样式问题答案

【问题标题】：Css style problems on input in IE8在 IE8 中输入的 CSS 样式问题
【发布时间】：2011-07-12 15:24:58
【问题描述】：

我在获取输入中的文本以在 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;
}

【问题讨论】：

IE...这样一个令人沮丧的软件:-(我感到你的痛苦！要尝试的一件事（如果你还没有得到它）是将文档类型设置为严格 - 我花了大约 2 天在 IE 中制作网站，后来意识到我不小心使用了 Transitional doctype :-P 哦，痛苦。

标签： html css input textinput

【解决方案1】：

为搜索输入字段#q设置行高属性？

【讨论】：

【解决方案2】：

尝试指定line-height: 34px 或类似的名称。

【讨论】：

啊，好旧的 line-height 我怎么会忘记 :) 有趣的是它似乎根本不影响 Firefox，它已经看起来不错了。但它适用于 IE。
我试过这个，它可以正确放置文本。然而，在其他现代浏览器中，插入符号现在与输入字段一样高，而且看起来不太好.. 无论如何要解决这个问题？
@squ 你有没有找到解决巨大插入符号的方法？我有同样的问题
@tmsimont 不是真的，我必须做一个 IE 特定的 hack 并只为 IE 设置行高，并为其他浏览器做常规高度..
值得看看下面的答案：stackoverflow.com/a/14876642/731782 为我解决了这个问题。

【解决方案3】：

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

【讨论】：

我收回了它，这确实对我有用！谢谢 Bergie3000
@bergie3000 你是救生员

【解决方案4】：

有一个 CSS3 规则：box-sizing。 IE8 支持此规则。

IE（包括IE8）有非标准的盒子模型，其中padding和border包含在width和height中，而其他浏览器采用标准并且不包括填充和边框宽度.详细描述here.
通过将box-sizing 设置为content-box，您告诉浏览器不要在宽度中包含边框和填充，如果您设置box-sizing: border-box，所有浏览器都会在宽度中包含边框和填充。这个或这个，所有现代浏览器的显示都是一致的（不是IE8那么现代，但它也支持这个规则：）。

【讨论】：

+1。这对我遇到的左填充问题非常有帮助。不知道 IE8 支持 box-sizing。谢谢！
哦 IE8 ...你永远不知道它接下来会从哪里击中你；）

【解决方案5】：

输入位置应为position:absolute;，以便line-height:37px; 和display:inline; 起作用。

【讨论】：

【解决方案6】：

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

例如。你设置的

  INPUT {
   line-height: 44px
}

还有……

  INPUT:focus {
    line-height: 45px
 }

这个...f... 像素有所不同（焦点应该比正常多 1px），现在您的光标在 IE8 上处于良好位置。

【讨论】：

【解决方案7】：

尝试设置针对 IE8 及以下版本的行高，如下所示：

line-height: 32px\9;

line-height 值应等于输入的高度，\9 将针对 IE8 及以下版本。

【讨论】：

【解决方案8】：

随便用

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

【讨论】：

【解决方案9】：

我还不能发表评论，马修的回答对我有用，但如果人们想要一个仅限 IE 的包装器而不在其他任何地方搜索：

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

【讨论】：