IE6 浮动定位的BUG
首先来看浮动定位的例子:
<html> <head> <link href="./test.css" rel="stylesheet"/> </head> <body> <div class="content"> <div class="linkHred"><a href="">查看详情</a> <div class="tips"> </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属性的时候，会相对于文本进行定位，而不是父元素所在的容器，也就是说会随着文本内容进行左右浮动，而其他浏览器保证是对父元素进行定位。
