Question

enter image description here

我有两个问题：

1）占位符

2）光标文本缩进

首先，我搜索了一下，并且知道占位符是HTML5功能，并且在IE8中不支持。有替代解决方案吗？

其次，在IE8中，光标不以文本缩进开始。

HTML：

<input autofocus="autofocus" id="home_email_input" name="username" placeholder="E-mail" type="text">
<input id="home_pw_input" name="password" placeholder="PW" type="password">

CSS：

#home_email_input {
    margin-left: 22px;
    margin-bottom: 10px;
    width: 183px;
    background: url(/images/envelope.gif) no-repeat scroll 4px 3px;
    text-indent: 30px;
}
#home_pw_input {
    margin-left: 22px;
    margin-bottom: 10px;
    width: 183px;
    background: url(/images/lock.gif) no-repeat 5px -0.5px;
    text-indent: 30px;
}

Answer 1

使用webshims库来填充占位符

对于文本缩进，只需在IE的输入框中添加额外的左边距

Answer 2

添加line-height以获取IE

的缩进功能

你走了：

http://jsfiddle.net/Cernx/12/

对于占位符，您必须使用javascript。 HTML中没有其他替代方案。

Answer 3

替代解决方案是为输入字段添加标签，而不是使用占位符作为标签的不可靠代理。占位符应该帮助用户例如描述预期的输入格式，而不是做标签的工作。例如：

<label for=email>E-mail:</label> <input type=email id=email name=email>

HTML5 CR说明了placeholder attribute：“占位符属性不应该用作标签的替代品。 [...]使用占位符属性作为标签的替代可能会降低控件的可访问性和可用性，包括老用户和具有认知，移动性，精细运动技能或视力障碍的用户。虽然控件标签给出的提示始终显示，但占位符属性中给出的短提示仅在用户输入值之前显示。此外，占位符文本可能会被误认为是预填充值，并且通常实现占位符文本的默认颜色提供的对比度不足，并且缺少单独的可见标签会减小可用于将焦点设置在控件上的命中区域的大小。”

IE8文本缩进和占位符问题

3 个答案: