css - 位置 : absolute pushes content to right in Opera/FF/IE but not with Webkit browsers

Question

我使用 960gs 以标准的一栏居中布局对页面进行布局，先是页眉，然后是导航，然后是内容，然后是页脚。

#nav 内部有垂直列表。如果客户端启用了 javascript，则列表(使用 JQuery)将设置为在悬停时弹出(通过将下方 li 的显示从无更改为阻止)。

这意味着 #nav 具有 position: relative 和高 z-index，#content 设置为 position: absolute 以便列表流过内容的顶部。否则，内容会向下移动以容纳列表。

它在 Safari v5 和 Chrome v11 中运行良好。然而，FF v10 和 Opera v11(和 IE，但这是给定的；)决定从导航的右边缘 开始 的左侧偏移#content，因此向右大约 800ish 像素。

我已尝试通过将#container 位置设置为相对位置来解决此问题，但这无济于事。简而言之，行 position: absolute; 是改变事物的那一行。

我的 CSS/定位知识有限，因此非常感谢任何帮助。

我在这里使用了 Haml，因为编写 HTML 非常麻烦和冗长，但即使您不了解 Haml，您也会明白:

#container.container_16
  #header.prefix_3.grid_10
    %h1
      My wonderful web site
  #nav.prefix_3.grid_10
    %ul.vert_nav.grid_2
      %li.head
        Home
      %li.sub
        About
      %li.sub
        Contact us
  #content.prefix_3.grid_10
    %p
      Lorem ipsum...

  #footer
    %p
      You've reached the end.

一些 CSS:

#container {
  height: auto !important;
  min-height: 100%;
  position: relative;
}

#content { 
  height: 100%;
  padding-bottom: 1em;
  padding-top: 0.2em;
  position: absolute;
  z-index: 1;
}

.container_16 .grid_10 { 
  width: 580px;
}

.container_16 .prefix_3 { 
  padding-left: 180px;
}
.container_12, .container_16 { 
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

#nav ul.vert_nav li { 
  margin-left: 0.3em;
  margin-right: 0.3em;
  text-align: center;
}

#nav li.sub { 
  background-color: #000000;
  display: block;
  position: relative;
  z-index: 500;
}

和一些 js:

(function() {

  jQuery(function($) {
    $("li.sub").toggle();
    $("#content").css("top", "12em");
    return $("ul.vert_nav").mouseenter(function() {
      return $(this).find("li.sub").show();
    }).mouseleave(function() {
      return $(this).find("li.sub").hide();
    });
  });

}).call(this);

总结:

1. 为了让菜单飞过内容的顶部，我需要在内容 div 上定位绝对位置。
2. 它必须支持 960gs。

要超出这些要求，需要有一个真正可靠的理由。

Answer 1

与其绝对定位 #content，不如绝对定位下拉项。

例如你可以:

HTML

<ul>
    <li>
        No drop down
    </li>
    <li>
        A drop down
        <ul>
            <li>option 1</li>
            <li>option 2</li>
        </ul>
    </li>
</ul>

CSS

ul li {
    display: inline-block;
    position: relative;        /* for the absolutely positioned children */
}

ul li ul {
    position: absolute;
    top: 1em;
    left: 0px;
}

工作示例:http://jsfiddle.net/JeAH8/