text-indent用在input下英文无效的解决办法

2014-06-12 10:17:34来源:威易网作者:icech

text-indent是一个常用的css属性,在任何浏览器下都可以使用。但是,最近同事写代码的时候发现了一个Bug,text-indent用在input下英文无效。

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认为它的编码变化了吧。

关键词:css

赞助商链接: