更新時間：2014-11-26text-indent是一個常用的css屬性，在任何瀏覽器下都可以使用。但是，最近同事寫代碼的時候發(fā)現(xiàn)了一個Bug，text-indent用在input下英文無效。
這個問題十分有意思，Chrome、Firefox等瀏覽器下text-indent用在input下是正常的，但是在IE下卻出現(xiàn)了問題。
下面我們來看一下效果：
代碼如下：
<input type="text" value="this is an apple" style="text-indent:2em" />
<br />
<input type="text" value="這是一個蘋果" style="text-indent:2em" />
在Chrome下的顯示效果：
在IE10下的顯示效果：
我們看得出來，中文是正常的，但是英文卻出現(xiàn)了Bug。所以這個Bug的觸發(fā)點(diǎn)為：在IE瀏覽器下input使用text-indent時候使用英文。好啰嗦！
怎么樣解決呢？這個是重點(diǎn)了。我也是無意中發(fā)現(xiàn)了解決的辦法：就是在value的值里面加一個“ ”。沒錯！這個是個空格。但是加上了它，在顯示的時候雖然有些錯位，但是卻完美的解決了英文text-indent無效的問題。
代碼重新寫一下（看紅色代碼部分）：
<input type="text" value=" this is an apple" style="text-indent:2em" />
<br />
<input type="text" value="這是一個蘋果" style="text-indent:2em" />
再運(yùn)行看效果就差不多了，稍有錯位，但是可以使用text-indent做些調(diào)整就OK了！
原理嘛，我估計是正好讓IE認(rèn)為它的編碼變化了吧。
