猿吟鹤唳本无意,不知下有行人行

解决margin-bottom 在IE7、IE6下,失效问题

0(正常显示)

1(显示异常)

做OA后台的时候,有个布局是需要,五行大图标来表示。我用的固定的高度,所以直接用margin-top:8px;和margin-bottom:8px;

可是在IE6 和IE7 中下边距竟然没有。之后找到解决方法,在此一记。希望能帮到和我遇到同样问题的同学。

我是在一个div里面写了个ul,包含着li,每个li里面包含图片和标题。(可看上图)

html里面代码:

css代码:

.list_1{

height:auto; /*当浏览器窗口缩放的时候,图标超过一行,会自动排列成两行。而避免了后面的图标隐藏*/

width:100%;

margin:0px;

padding:0px;}

.list_1 ul li{
float: left;
width: 100px;
margin-top:8px;
margin-bottom:8px;}

.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}/*如果去掉clear就会实现不了下边距*/

发表评论

您的电子邮箱地址不会被公开。