Question

我正在尝试制作一个<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）？谢谢！

Answer 1

从dl.icons dd

中删除float：left

在IE 7中<dd>之前<dl>清除<dl> </dd> </dl>

1 个答案: