Question

我的HTML，

<input autofocus="autofocus" id="home_email_input" maxlength="85" name="username" placeholder="E-mail" type="text">

我的css，

#home_email_input {
margin-left: 22px;
margin-bottom: 10px;
width: 154px;
padding-left: 30px;
background: url(http://s23.postimg.org/rsc76su0n/envelope.gif) no-repeat scroll 4px 3px;
}

演示，

http://jsbin.com/OZALEdo

正如您所看到的，如果用户输入长字，则在Chrome中可以正常工作，

但在IE8我有两个问题，

如果文本变长，则会遍历图标区域。填充不起作用
占位符不起作用。

我会等待一个好的解决方案。三江源！

请勿告诉我用户必须更新浏览器。我可爱的客户想要IE8 !!!!

Answer 1

如果文本变长，则会遍历图标区域。填充不起作用

将 next 图标添加到该字段中。从字段中删除边框。在包含字段和图像的元素上放置边框。

占位符不起作用。

在字段旁边使用<label>。 placeholder明确不是为了描述该领域的目的。这是提示和例子。

<label> Email <input placeholder="bob@example.com"> </label>

IE8中的文本溢出输入字段和占位符问题

1 个答案: