jquery-ui 小图标 IE6/7下 显示空白问题

最近在项目中用到了JQUERY-UI CSS FRAMWORK中的图标(icons),反正都用JQUERY-UI了,用这个图标也挺方便的.

<span class='ui-icon ui-icon-pencil' style='display:inline-block;cursor:pointer;margin-right:5px;' title='修改'>

这样就可以显示出一个小铅笔的图标,在一般浏览器下都不会出现问题,但是在IE6/7 下面,图标会显示为空白,经过前台调试发现是 text-indent出现的问题,继而查找解决方案:

CSS text-indent 属性

定义

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

说明

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

默认值：	not specified
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.textIndent="50px"

下面引用网上找到的解决方案:(原文地址)

表单中有时候为了美观，放弃默认的button，而使用背景图片（提交(type=submit)和重置(type=reset)按钮），而考虑到 SEO因素，按钮的 value值不能为空，但又不能在页面上显示出来。这时候我们一般用text-indent:–9999px;overflow:hidden;来隐藏。

在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如：

<a href="#" class="btn">Button</a>

css我习惯写成这样

.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}

在标准浏览器下是没问题的，但是在IE6和7下会触发A标签消失的bug。


解决方法1：

display:inline-block;

改为:

display:block;

然后再做布局

解决方法2：

text-indent:-9999px;

改为:

font-size:0; line-height:0;

或者各种可以隐藏掉内容元素的方法。

解决方法3：

&nbsp;<a href="#" class="btn">Button</a>

在按钮前面增加任何元素，都可以让消失的按钮重新出现。

解决方法4：

给元素加 position:absolute;

PS：inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素，也就出现了上文中的结果。

造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。


考察元素的默认样式，可知：input、select、button、textarea的默认display皆为inline-block,所以在布局时应加以注意…