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