css - IE7 浮动错误。是否有维护html的修复程序？

Question

这是我的问题的演示。这在 Chrome 和 Firefox 中可以正常工作。但是，在 IE7 中，未清除的浮动元素最终会在容器顶部并排放置。 http://jsfiddle.net/eGAHx/

HTML：

<span class="bold floatLeft clearLeft">ISBN-13:&nbsp;</span>
<h2 class="floatLeft" itemprop="isbn">9780538735452</h2>
<span class="bold floatLeft clearLeft">ISBN:&nbsp;</span>
<h2 class="floatLeft">0538735457</h2>
<span class="bold floatLeft clearLeft">Edition:&nbsp;</span>
<span class="floatLeft" itemprop="bookEdition">3</span>
<span class="bold floatLeft clearLeft">Pub Date:&nbsp;</span>
<span class="floatLeft" itemprop="datePublished">2010</span>
<span class="bold floatLeft clearLeft">Publisher:&nbsp;</span>
<span class="floatLeft" itemprop="publisher">Brooks Cole</span>​

CSS：

.floatLeft{float:left}
.bold{font-weight:bold}
.clearLeft{clear:left}​

预期结果：
ISBN-13： 9780538735452
ISBN： 0538735457
版本： 3
出版日期： 2010
出版商： Brooks Cole

当前 IE7 结果：
ISBN-13： 9780538735452053873545732010BrooksCole
ISBN：
版本：
Pub Date：
Publisher：

Answer 1

您可以在 IE7 的 head 标签中使用这种样式代码

<!--[if IE 7]>
 <style type="text/css">
  h2{
    clear:both;
  }
 </style>
<![endif]-->

但是你在 h2 之前给父母 h2 例如

yourparentelenent h2{
   clear:both
}

Answer 2

我不明白你为什么要浮动这些。

为什么不只<strong>在左边的文本和<br />每行的末尾使用标签呢？