在IE 7中製作<dl>之前清空<dd>？

我正在嘗試使定義我在頁面上使用的圖標。我需要它，以便每個圖標都在<dt>之內，它的定義位於以下<dl>之內。在每個圖標定義之後，我想要一個換行符。很簡單，對吧？那麼，IE7說不！在IE 7中製作<dl>之前清空<dd>？

這裏是我的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）？謝謝！

來源

2010-08-18 Garrett

刪除浮動：從dl.icons左DD

來源

2010-08-18 18:23:29

+1打我吧：P - > http://jsfiddle.net/vmMZ4/3/ – Fabian 2010-08-18 18:28:20

哇。介意解釋爲什麼這有效？ – Garrett 2010-08-18 18:39:05

@Vinay B R不錯的一個！ – Alex 2012-02-02 15:46:16

在IE 7中製作<dl>之前清空<dd>？

回答

相關問題