IE7 和 IE8 中的 CSS 问题 - <input type="text"> 字段上的文本缩进答案

【问题标题】：CSS Issue in IE7 and IE8 - text-indent on <input type="text"> fieldIE7 和 IE8 中的 CSS 问题 - <input type="text"> 字段上的文本缩进
【发布时间】：2011-05-06 18:05:47
【问题描述】：

是否可以让 IE7 和 IE8 尊重输入字段上的 text-indent css 属性？

这是我的代码

<!DOCTYPE html>
<html>
<body>
        <input type="text" style="text-indent:100px; display:block;" value="Test indent" />
</body>
</html>

当您第一次在 IE8 中加载页面时，文本没有缩进。您可以通过关注文本字段并在其中输入内容（即触发 onchange 事件）来“激活”文本缩进属性。

如何让 IE7 和 IE8 在页面加载而不是 input.onchange 事件时尊重输入文本元素的文本缩进？

【问题讨论】：

为什么需要这个？也许还有其他方法。
通常我会使用 padding-left 或 margin-left...但由于我正在做的其他事情，我将不得不依赖 text-indent
不建议使用超出其意图的东西。正如@gelogenic 下面所说，text-indent 用于缩进第一行。 inline 元素（例如 input）如果不是段落中的第一项，则不一定会尊重这一点。
此输入字段仅包含一行。如果我想要多行，我会使用textarea
在这种情况下，input 字段与 span 没有什么不同。 <p>This is a <input type="text" value="test"/></p> （可能）是一行文本。 "test" 不是它自己的行，除非 input 是 display: block; textarea 元素是 block level 元素（如 p 标记）。

标签： css internet-explorer-8

【解决方案1】：

在正常情况下，输入标签文本缩进在 ie6 和 ie7 中不起作用如果我们添加 lineheight:1px 它将适用于所有浏览器

文本缩进适用于所有浏览器

<input type="text" style="text-indent:-100px; display:block; line-height:1px;" value="Test indent" />

文本缩进不适用于 ie7 和 ie6 浏览器

<input type="text" style="text-indent:-100px; display:block;" value="Test indent" />

演示

http://jsfiddle.net/KczMR/1/

【讨论】：

似乎任何 line-height 都可以，所以最好写 line-height: 1em;
感谢在 IE 中很难隐藏输入文本

【解决方案2】：

您确定要“text-indent”而不是“margin-left”或“padding-left”属性吗？ 'text-indent' 属性意味着只影响元素中的第一行文本。使用边距或填充可能会更好。

【讨论】：

通常我会使用 padding-left 或 margin-left...但由于我正在做的其他事情，我将不得不依赖 text-indent