代码改变世界

IE6下的text-indent属性BUG解决方法

2011-05-13 10:38  rocdu  阅读(1233)  评论(0)  编辑  收藏  举报

在下图的CSS实现时出现了IE6的text-indent属性BUG问题。

<h2>
    <span title="搜狐母婴" class="sohu-baby-icon">搜狐母婴</span>
    育儿日历—活动早知道
</h2>

h2{
	width:390px;
	color:#333;
	margin:0 auto 8px;
	font:600 14px/16px '宋体';
	text-align:left;
	padding-top:5px;
	height:19px;
}
h2 .sohu-baby-icon{
	width:73px;
	height:24px;
	float:left;
	margin:-5px 9px 0 auto;
	_margin:-5px 6px 0 auto;
	display:block;
	text-indent:-99999999px;
	background:url(../img/sohu_baby_icon.gif);
}

以上DIV+CSS代码可以实现设计要求，但是如果CSS中不写"display:block"属性。结果IE6下就会出现BUG，看下图。

咦，标题文字忘记写了吗？不然，其实文字是存在的，只不过写在SPAN标签里的text-indent属性竟然影响到了它的父级H2标签内的文本，使标题文本移到了H2标签之外，就看不见了。IE6真是神奇呀~

SPAN本身是行内元素无宽无高，float之后，其转为块元素，宽高即现。按理说不再需要用display:block来定义其为块元素了，但本例中这个display:block却成了IE6的救命稻草。