Я пытаюсь сделать <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)? Спасибо!