Question

我正在制作一个水平下拉菜单，当将每个下拉菜单放在其项目下方时，它最多只是挑剔。

#nav { float:right; }
  #nav li { display:inline;position:relative; }
    #nav li ul { display:none; }
      #nav li ul.current { position:absolute; display:block; z-index:9; left:0; }
        #nav li ul.current li { display:block; }

的菜单结构

<ul id="nav">
  <li><a href="#">link</a>
    <ul>
      <li><a href="#">sub</a></li>
    </ul>
  </li>
  <li><a href="#">link</a>
    <ul>
      <li><a href="#">sub</a></li>
    </ul>
  </li>
</ul>

和一些让它运作的js

$(document).click(function(e) {
  if($(e.target).is("#nav li a")) {
    $("#nav li ul.current").removeClass("current");
    $(e.target).parent().find("ul").addClass("current");
  } else {
    $("#nav li ul.current").removeClass("current");
  }
});

菜单适用于此代码但我的问题是：

左边为什么：0; #nav li ul.current上需要子菜单才能正确显示？

没有左：0;它只适用于铬。 Opera，FF和IE8都将子菜单呈现在#nav ul开头的位置。

我认为一个绝对定位的元素去了一个非静态位置的最近父元素。哪个是#nav li而不是#nav。

Answer 1

left is auto和auto的默认值表示浏览器使用various rules that you probably shouldn't care about自行计算位置，除非您正在编写CSS引擎。有足够的摆动空间，即使没有错误或误解，不同的浏览器也会得到不同的结果。

位置偏移是相对于最近的非静态祖先（即<li>），但这并不意味着偏移为零，left仍然是计算值，如果你没有指定它，它可以是负值。

基本上：说出你的意思。你的意思是left:0，所以你应该这么说。

Answer 2

Becoz当你提到位置：绝对时，一些浏览器理解它的默认设置，即左：0px，而在其他浏览器中，它显示荒谬的结果，它可能无法理解默认设置。

我认为这应该是原因......

左：0;职位要求？

2 个答案: