专注于discuz,uchome,dedecms等各类PHP程序仿站(二次开发和模板制作)。

« »
2014-05-15CSS+HTML

2,044 阅读

<转>IE6 7中text-indent会让按钮背景消失的解决办法

在页面中按钮的背景,为了美观,经常会用一张图片作为背景,考虑到SEO因素,不能删除文字,因此就通过text-indent让文字消失,如商家页面的“有折扣通知我”的按钮,

<a class=“button”>有折扣通知我</a>

.button { display:inline-block; *display:inline; zoom:1; margin-top:20px; outline:none; width:253px; height:51px; background:#F2860A url(i/btn-biz-notice.jpg) no-repeat; text-indent:-9999px; }

但是以上代码在IE6和IE7中会存在一个问题,就是text-indent不仅会让文字消失了,也会让文字的背景图片也跟着消失了。
经查找原因发现,inline-block在IE6、IE7和IE8的表现形式是不同的,inline-block的元素在IE6、IE7中使用text-indent会让按钮的背景随着文字一块消失。
*解决办法是给按钮设置display:block或者设置float:left,如下

<a class=“button”>有折扣通知我</a>

.button { display:block; *display:inline; overflow:hidden; zoom:1; margin-top:20px; outline:none; width:253px; height:51px; background:#F2860A url(i/btn-biz-notice.jpg) no-repeat; text-indent:-9999px; }

原创文章如转载,请注明:转载自火跃工作室
本文网址:http://www.huoyue.org/ie-text-indent

日志信息 »

该日志于2014-05-15 13:42由 火跃 发表在CSS+HTML分类下, 评论已关闭。

相关日志 »

  • 暂无相关日志

没有评论

抱歉,评论被关闭