我是流體布局控，經(jīng)常會遇到文本框以及文本域?qū)挾?00%自適應(yīng)顯示的情況。

如下效果圖：

在窄屏下，上面的文本框?qū)挾纫惨獠繉挾茸冃　?/p>

難點
對于文本框或者文本域，光標(biāo)最好距離左側(cè)邊緣有一定的間距。因此，我們基本上都有類似下面的設(shè)置：

如下截圖：

這個問題再FireFox瀏覽器下存在已經(jīng)有3年之久了，到現(xiàn)在還沒有修復(fù)。

如何修復(fù)這個問題呢？

//zxx: 可能有人會提議div模擬文本框（即div設(shè)置padding值）， 文本框本身no border, no padding, 且width:100. 這種操蛋的方法我是一點都不喜歡的（純屬個人喜好，沒有攻擊的意思），一是啰嗦；二來文本框本身可能就有box-shadow, outline以及內(nèi)聯(lián)的交互驗證UI（如驗證非法紅色外發(fā)光），難道你想把這些都抹殺掉？？

更新2012-11-30

注意：FireFox 17+已經(jīng)修復(fù)了該問題！

firefox瀏覽器下的問題其實只是文字的位置問題而已，其本身的寬度渲染都是準(zhǔn)確的，因此，我們可以把解決問題的關(guān)鍵點放在解決文字不縮進(jìn)的問題上——我們自然而然就會想到文字縮進(jìn)屬性text-indent.

于是，在FireFox瀏覽器下，我們只要設(shè)置：