css - IE7 定义列表 float 清除

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/