IE6 浮动定位的BUG

首先来看浮动定位的例子:

 

<html>
<head>
<link href="./test.css" rel="stylesheet"/>
</head>
<body>
<div class="content">
<div class="linkHred"><a href="">查看详情</a>
<div class="tips">&nbsp;</div>
</div>

</div>
</body>
</html>

 

CSS代码如下所示:

 

.content{
	width:100px;
	text-align:center;
	margin:100px;
}
.linkHred{
	position:relative;
}
.tips{
	height:43px;
	width:178px;
	position:absolute;
	top:-36px;
	left:80px;
	background-image:url("./a.png");
	background-position:0px 0px;
	background-repeat:no-repeat;
}

 

   在firefox下可以观察到图片与文字挨在一块，

 


 

   但在ie6下，图片与文字会有一定的距离，

 

 


 

   原因在于:

   在IE6中，当碰到父元素定义了text-align属性的时候，会相对于文本进行定位，而不是父元素所在的容器，也就是说会随着文本内容进行左右浮动，而其他浏览器保证是对父元素进行定位。

posted @ 2012-09-09 18:51  老去的JAVA程序员  阅读(165)  评论(0)    收藏  举报