0

我有以下 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 在内的大多数浏览器上，这会正确地将我的徽标粘贴在标题区域的左侧，如下所示：

适用于 Chrome 等

但是在 IE, inc 9（我还没有测试过 10）上，它会破坏徽标的位置，将其放在标语后面，如下所示：

在此处输入图像描述

4

2 回答 2

1

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

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

于 2013-10-05T23:26:52.433 回答
0

这可能是一个简单的修复。在您的标题中或您的其他元数据中尝试此操作。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
于 2013-10-06T03:16:38.210 回答