昨天在項目中遇到要在一個輸入框中使用縮進的情況，要用text-indent首行縮進2個文字。然後發現在webkit下，在輸入框內容為空的時候，光標位置沒有縮進，還是在行首，輸入任意字符後，縮進才被激活。
HTML代碼如下：
1
<input type="text" style="text-indent:2em" />
查看demo
這裡無論是input元素還是textarea，或是其它設置了contentEditable=”true”的元素，都能必現這個bug。
IE各版本，Firefox均正常，只有chrome和safari等webkit內核的浏覽器才有這個問題。
這裡百思不得其解，也嘗試了很多方法，均無效。
後來和小李刀刀、poor聊到這個問題，突然想到:empty偽類，立刻測試，果然可以解決——雖然只是曲線模擬解決…
1
input[type="text"]:empty{padding-left:2em;}
然後在chromium社區提交了個bug單，不知道會不會被無視。
PS：Opera在這裡也有些小問題，input元素縮進表現正常，textarea元素不支持縮進，contentEditable=”true”元素和webkit表現一樣。
http://www.qianduan.net/fixed-text-indent-in-webkit-editable-element-bug.html