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

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

HTML代碼如下：

1>

查看demo

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

IE各版本，F(xiàn)irefox均正常，只有chrome和safari等webkit內(nèi)核的瀏覽器才有這個問題。

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

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

1input

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

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