html - ほとんどのブラウザでは画像が正しく表示されるのに、IE では表示されないのはなぜですか?

Question

次の HAML があります。

%header
  .grid
    %a{:name => "top"}
      .logo
        %a{:href => root_path}
          =image_tag("logo3.png")
    .tagline
      .clearfloat
      %p Fast Facts About Your Website, Your Competitors And Best Practice

次の HTML にコンパイルされます。

<header>
  <div class='grid'>
    <a name='top'>
      <div class='logo'>
        <a href='/'><img alt="Logo3" src="/assets/logo3-f98780b46c9b7f088007b22a6a6d3605.png" /></a>
      </div>
    </a>
  <div class='tagline'>
    <div class='clearfloat'></div>
    <p>Fast Facts About Your Website, Your Competitors And Best Practice</p>
  </div>
</div>
</header>

次のSASSもあります（Susyを含む）：

@import "compass/reset";
header {
  clear: both;
  padding: 1.25em;
  @include content-box;

  .grid {
    padding-bottom: 0em;
    padding-top: 0em;

    .logo {
      @include span-columns(3, 9);
      padding-left: 3.75em;
      margin: 0;
      height: 3.25em;
    }

    .tagline {
      @include span-columns(6 omega, 9);
      height: 3.25em;

      p {
        position:absolute;
        top: 3.25em;
        text-align: right;
        width: 50%;
      }}}}

.grid {
  @include container;
  padding-top: 3.75em;
  padding-bottom: 3.75em;
  padding-left: 1.25em;
  padding-right: 1.25em;  
  }

.clearfloat {clear: both;}

これは、次の CSS にコンパイルされます。

body {
    margin: 0;
    background-image: url(/assets/background-15f6db398b101b42f0b97400986e777a.png);
}
.container {
    *zoom: 1;
    max-width: 86.25em;
    _width: 86.25em;
    padding-left: 3.75em;
    padding-right: 3.75em;
    margin-left: auto;
    margin-right: auto;
}
.container:after {
    content: "";
    display: table;
    clear: both;
}
header {
    clear: both;
    padding: 1.25em;
    background-image: url(/assets/subtle_dots3-4c8426c60999e17a694d2d04c7df3c1d.png);
    -webkit-box-shadow: #191919 3px 3px 6px;
    -moz-box-shadow: #191919 3px 3px 6px;
    box-shadow: #191919 3px 3px 6px;
}
header .grid {
    padding-bottom: 0em;
    padding-top: 0em;
}
header .grid .logo {
    width: 30.43478%;
    float: left;
    margin-right: 4.34783%;
    display: inline;
    padding-left: 3.75em;
    margin: 0;
    height: 3.25em;
}
header .grid .tagline {
    width: 65.21739%;
    float: right;
    margin-right: 0;
    #margin-left: -3.75em;
    display: inline;
    height: 3.25em;
}
header .grid .tagline p {
    position: absolute;
    top: 3.25em;
    text-align: right;
    width: 50%;
}
.grid {
    *zoom: 1;
    max-width: 86.25em;
    _width: 86.25em;
    padding-left: 3.75em;
    padding-right: 3.75em;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3.75em;
    padding-bottom: 3.75em;
    padding-left: 1.25em;
    padding-right: 1.25em;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}
.clearfloat { clear: both }

Chrome を含むほとんどのブラウザーでは、次のようにヘッダー領域の左側にロゴが正しく貼り付けられます。

しかし、IE, inc 9 (私は 10 をテストしていません) では、次のように、ロゴの位置をキャッチフレーズの後ろに配置します。