文本溢出輸入字段和佔位符的問題在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

，你可以看到，如果用戶類型長字，在鉻它工作正常，

但IE8我有兩個問題，

• 如果文本很長，它trasspass圖標區域。填充不起作用
• 佔位符不起作用。

我會等待一個很好的解決方案。謝謝！

不要告訴我，用戶必須更新瀏覽器。我可愛的客戶需要IE8 !!!!

Answer 1

如果文字變長，它會通過圖標區域。填充不起作用

將圖標下一個到現場。從現場刪除邊框。在包含字段和圖像的元素上放置邊框。

佔位符不起作用。

在字段旁邊使用<label>。 placeholder明確不用於描述該領域的目的。這是提示和例子。

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