Html 为什么我的图像在大多数浏览器中都定位正确，而在IE中却不正确？

我有以下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>

这将编译为以下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）上，它破坏了徽标的位置，将其放置在标语后面，如下所示：

---

HTML代码无效。不能将锚点（a）元素嵌套在另一个锚点元素中。此外，除非使用HTML5，否则不能将块元素（div）嵌套在内联元素（a）中

---

当不同的浏览器解析它时，它们将有不同的方法来修复无效代码。要获得一致的结果，您需要创建有效的HTML代码。

这可能是一个简单的解决方案。在你的标题中，或者在你的其他元所在的任何地方尝试这个

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<meta http-equiv="X-UA-Compatible" content="IE=edge" />