月度归档: 2011 年 12 月

  • 解决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就会实现不了下边距*/