text-indent是一個常用的css屬性，在任何瀏覽器下都可以使用。但是，最近同事寫代碼的時候發現了一個Bug，text-indent用在input下英文無效。

這個問題十分有意思，Chrome、Firefox等瀏覽器下text-indent用在input下是正常的，但是在IE下卻出現了問題。

下面我們來看一下效果：

代碼如下：

<input type="text" value="this is an apple" style="text-indent:2em" />
<br />
<input type="text" value="這是一個蘋果" style="text-indent:2em" />

在Chrome下的顯示效果：

在IE10下的顯示效果：

我們看得出來，中文是正常的，但是英文卻出現了Bug。所以這個Bug的觸發點為：在IE瀏覽器下input使用text-indent時候使用英文。好啰嗦！

怎么樣解決呢？這個是重點了。我也是無意中發現了解決的辦法：就是在value的值里面加一個“&nbsp;”。沒錯！這個是個空格。但是加上了它，在顯示的時候雖然有些錯位，但是卻完美的解決了英文text-indent無效的問題。

代碼重新寫一下（看紅色代碼部分）：

<input type="text" value="&nbsp;this is an apple" style="text-indent:2em" />
<br />
<input type="text" value="這是一個蘋果" style="text-indent:2em" />

再運行看效果就差不多了，稍有錯位，但是可以使用text-indent做些調整就OK了！

原理嘛，我估計是正好讓IE認為它的編碼變化了吧。