武林網(www.49028c.com)文章簡介：巧用:empty解決webkit核心瀏覽器text-indent的bug.

昨天在項目中遇到要在一個輸入框中使用縮進的情況，要用text-indent首行縮進2個文字。然后發現在webkit下，在輸入框內容為空的時候，光標位置沒有縮進，還是在行首，輸入任意字符后，縮進才被激活。

HTML代碼如下：

1>

查看demo

這里無論是input元素還是textarea，或是其它設置了contentEditable=”true”的元素，都能必現這個bug。

IE各版本，Firefox均正常，只有chrome和safari等webkit內核的瀏覽器才有這個問題。

這里百思不得其解，也嘗試了很多方法，均無效。

后來和小李刀刀、poor聊到這個問題，突然想到:empty偽類，立刻測試，果然可以解決——雖然只是曲線模擬解決…

1input

然后在chromium社區提交了個bug單，不知道會不會被無視。

PS：Opera在這里也有些小問題，input元素縮進表現正常，textarea元素不支持縮進，contentEditable=”true”元素和webkit表現一樣。