css - IE7浮动清除定义列表

Question

我有一个定义列表，我想用标签/定义对彼此相邻显示。

以下代码在所有现代浏览器中都能正常工作。我试图让它在 IE7 中工作，但 dd 值不尊重先前清除的 dt。我还需要做什么才能让它们像在 chrome 或 ff 中那样堆叠。

<style type="text/css">
   .label-value-list {
    }
   .label-value-list dt {
      float: left;
      clear: left;
      width: 100px;
   }
   .label-value-list dd {                           
      float: left;
   }
</style>

<dl class="label-value-list">
   <dt>First Label</dt>
   <dd>This is the first value</dd>

   <dt>Second Label</dt>
   <dd>I should be below the first value<br/>and I have two lines</dd>

   <dt>Third Label</dt>
   <dd>I should be below the second value</dd>
</dl>

Answer 1

添加

*:first-child+html .label-value-list dd {
   float: none;
   display: inline-block;
}

到你的 CSS。

见http://jsfiddle.net/FFMvY/1/

Answer 2

float为每个/对删除DD或使用自己的自我清除。顺便说一句，在第二种情况下，使用而不是.DLDTDDdisplay: tablefloat