Machen Sie eine <dl> klar vor jemals <dd> in IE 7?

Question

Ich versuche ein <dl> zu machen, um die Symbole zu definieren, die ich auf der Seite verwende. Ich will es so, dass jedes Symbol in einem <dt> ist und seine Definition ist innerhalb der folgenden <dl>. Nach jeder Icon-Definition möchte ich einen Zeilenumbruch. Einfach, oder? Nun, IE7 sagt nein!

Hier mein HTML ist:

 <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> 

Hier ist meine 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 */ 

hier Meine Methode sowohl die <dt> und <dd> links schwimmt, und das Clearing bei jedem <dt>, die leider funktioniert nicht in IE 7.

Ich habe versucht, die so genannte magische clearfix, aber ohne Erfolg. Dies funktioniert in Firefox und IE 8.

Alle anderen Ideen, die möglicherweise funktionieren könnten (vorzugsweise ohne zu viel HTML zu ändern)? Vielen Dank!

Answer 1

entfernen float: left von dl.icons dd