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 中查看时，验证消息位于两个输入之间。所以我最终将它们按以下顺序堆叠在一起；输入，验证消息，然后选择菜单。代码在 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;
 } 

谁能帮助它为什么这样做？

谢谢