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

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

if the text gets long, it trasspass the icon area. the padding doesn't work

将图标放在字段的旁边。从字段中删除边框。在包含字段和图像的元素上放置边框。

placeholder doesn't work.

使用 <label>旁边的领域。 placeholder显然不是为了描述该字段的目的。它用于提示和示例。

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