html - Internet Explorer 8 での HTML マークアップのレンダリングが他のブラウザーと異なる

Question

以下は、コードにあるマークアップです。IE8 を除くすべてのブラウザで正常に動作します。

<label>this is a label</label>
<input type="text" class="formTxt" />
<div class="fl">
    <select><option>opt 1</option><option>opt 2</option></select>
</div>
<div class="validationMsg">there has been an error!</div>

IE8 で表示すると、検証メッセージは 2 つの入力の間に配置されます。したがって、次の順序でそれらを積み重ねることになります。入力、検証メッセージ、次にメニューを選択します。コードは DOM で次のようにレンダリングされます。

<label>this is a label</label>
<input type="text" class="" />
<div class="validationMsg">there has been an error!</div>
<div class="fl">
    <select><option>opt 1</option><option>opt 2</option></select>
</div>

CSS:

 label {
  float: left;
  clear: both;
  padding: 4px 0;
  width: 100%;
 }

 .formTxt {
  background: none repeat scroll 0 0 #FFF;
  border: 1px solid #AAA;
  border-radius: 3px;
  float: left;
  clear: both;
  outline: medium none;
  padding: 4px;
 }

 input {
  height: 15px;
  line-height: 15px;
 }

 .inputSmall {
  width: 110px;
 }

 .fl {
  float: left;
 }

 .validationMsg{
  clear: both;
  float: left;
  display: block;
  width: 100%;
  font-size: 0.8em;
  padding: 0.3em 0 0;
  line-height: 1.3em;
 } 

なぜこれを行っているのか、誰でも助けることができますか?

ありがとう