去掉IE下button上的文字

有时候页面美化要求，不得不把button上的文字一并做成图片

 

 

<input type="button' value="remove button text in ie" />

 

这个时候我们要采取一些办法隐藏button的value里的文字

 

通常我会用

 

 

text-indent: -9999px;

 测过ff和chrome下都正常。但是在ie下由于样式的综合作用，button元素会随着text-indent的值移走，显示情的况有两种：

 

一种：整个button都不见了(display:inline-block;)

二种：button上的文字依然在(display:block;)

 

我们需要为ie这样写：

 

 

text-indent:-9999px; text-transform:capitalize;

 

这样就都兼容了。

 

另外一种方式

 

text-indent:0; line-height:0; font-size:0; overflow:hidden;

 

经测试可以兼容目前的所有浏览器。