0

http://jsfiddle.net/CtaBe/

我已经在 FF、Chrome 和 IE 中对此进行了测试。只有 FF 显示了预期的行为(或者至少我认为是预期的行为)。Chrome 和 IE 表现出相同的行为:当您第一次关注输入时,光标不会缩进。在您键入某些内容、删除它并重新聚焦后,它会正确缩进。

我怎样才能解决这个问题?因为我想在那个缩进空间显示图像。

4

3 回答 3

2

快速免责声明:此消息概述了为什么人们会选择在输入字段上使用文本缩进而不是填充的可靠示例。它没有回答“如何修复 IE 处理输入字段上的文本缩进”

关于 padding-left 的事情是它会改变输入字段的宽度,这可能是不可取的。

想象一个场景,您希望为输入数据的以下状态显示背景图像图标:

  • 必填项目
  • 输入无效
  • 错过必填字段
  • 密码强度

在这种情况下,我们需要将文本从左边框移开以显示图标(这比向右移动要简单得多,但这是另一个讨论。如果我们使用填充,宽度输入字段的变化。这并不理想,因为各种“状态”可以改变。

例如,一个字段可能只需要基于另一个字段的值。当该字段“变为”需要时,该字段根据我们应用的任何填充“增长”,以通过相关类将文本从图标移开。这远非优雅,尤其是当其他字段浮动在它旁边时。

此外,在 textareas 的情况下,我们不想填充整个边 - 第一行就足够了。

这正是使用 text-indent 发挥作用的地方。而且效果很好——除了在 Internet Explorer 中。当我寻找其他想法或解决方案时,这就是让我来到这里的原因。我有一些想法,但希望有一些我没有想到的更简单的东西。

于 2012-04-24T01:08:21.793 回答
1

在 Chrome 中,这是一个已知问题。请给它加星标:)

于 2011-08-30T03:24:12.497 回答
0

'text-indent' 适用于块级元素、表格单元格和内联块。我希望您在非块级元素上使用它。

于 2014-01-29T12:57:01.213 回答