Question

CSS在IE6和其他浏览器的问题

上面一部分的图片是IE6下面显示的效果，下图是chrome显示的效果
html如下
<div>
<span>友情链接:</span>
<a href="#">测试链接</a>
<a href="#">测试链接</a>
<a href="#">测试链接</a>
。。。。
</div>
css是这样的
div *
{
float:left;
line-height:120%;
margin-right:10px;
}
为何在IE下面最后一个链接明明挤不下了还硬是要把剩下的空间挤进去？
不会自动换行么？达到chrome这样的效果

Answer 1

ie6对margin属性有双倍距离的bug，你把ie6下的margin距离设小点，用_margin-left:5px;具体的你自己调一下。

Answer 2

<style type="text/css">
div * {
line-height: 120%;
margin-right: 10px;
}
div {
width: 500px;
margin: 100px auto 0;
border: 1px solid #f00;
}
</style>

<div>
<span>友情链接:</span>
<a href="#">测试链接</a>
<a href="#">测试链接</a>
<a href="#">测试链接</a>
.....
</div>

这样写就没有问题，不用写flaot可以自动换行

Answer 3

加个宽度 或者不要用浮动，用display:inline-block;

Answer 4

加一个强制不换行，white-space:nowrap;