首先来看浮动定位的例子:
<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属性的时候，会相对于文本进行定位，而不是父元素所在的容器，也就是说会随着文本内容进行左右浮动，而其他浏览器保证是对父元素进行定位。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
