css – 在IE 7之前做一个明确的事情？

我正在尝试制作一个< dl>定义我在页面上使用的图标.我想要它,以便每个图标都在< dt>内.它的定义在以下< dl>内.在每个图标定义之后,我想要一个换行符.简单吧？好吧,IE7说没有！

这是我的HTML：

<dl style="display: block;" id="surveysIcons" class="icons">
            <dt class="clearfix"><span class="icon"><img alt="Complete" title="" src="images/fiq_complete.png"></span></dt>
            <dd>You have completed the survey</dd>

            <dt class="clearfix"><span class="icon"><img alt="Incomplete" title="" src="images/fiq_incomplete.png"></span></dt>
            <dd>You have missed the survey</dd>
        </dl>

这是我的CSS：

dl.icons {
    margin: 0 0 1em 0;
    padding: 0;
    width:100%;
    overflow:hidden;
    line-height:24px;
    clear: both;
} 
dl.icons dt {
    clear:left;
    margin:0;
    float:left;
    min-height:24px;
}
dl.icons dd {
    padding: 3px;
    margin: 0 0 0 5px;
    float:left;
    min-height:24px;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE/Mac */

我的方法是浮动< dt>和< dd>左,并清除每个< dt>,遗憾的是,它在IE 7中不起作用.

我尝试了所谓的魔法clearfix,但无济于事.这适用于Firefox和IE 8.

任何其他可能使这项工作成功的想法(最好不要改变太多的HTML)？谢谢！

解决方法

从dl.icons dd中删除float：left