DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> webkit下text-indent首行縮進文字問題
webkit下text-indent首行縮進文字問題
編輯:CSS進階教程     

昨天在項目中遇到要在一個輸入框中使用縮進的情況,要用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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved