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:
版:
発行日:
発行元:

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 />各行の末尾にタグを使用しないのはなぜですか?