jquery - 导航大小有时会加载到整个页面的大小

Question

我正在使用一个名为 MagicLine 的模板(不会让我发布它的链接所以把它扔到谷歌中你会很容易找到它。抱歉)

问题示例可在此处找到:http://lesiondesign.com/test/elite/

问题总结: 使用此模板构建我的导航。 Opera 的评论中发布了一个似乎有效的修复程序，并且在大多数情况下导航看起来很棒。但是，似乎存在导航大小(被 javascript 阻碍)在整个屏幕上自行调整大小的问题。这在 Chrome 中出现很多，我通常只有在 Firefox 中刷新很多后才能看到它。单击导航项后，它似乎总是很小。

代码细节:

Javascript

$magicLineTwo
        //The next line is what sets the width, sometimes my width is set to 1800px as opposed to the 60px that is correct. This does not happen every time which is why this problem is so difficult to solve.
        .width($(".current_page_item_two").width())
        .height($mainNav2.height())
        .css("left", $(".current_page_item_two a").position().left)
        .data("origLeft", $(".current_page_item_two a").position().left)
        .data("origWidth", $magicLineTwo.width())
        .data("origColor", $(".current_page_item_two a").attr("rel"));

CSS

此处的宽度是一个无关紧要的预设值，如果将其更改为微小的宽度，它会产生影响，但在大多数情况下，只要将其设置为某个值，javascript 就会对其进行适当的调整

  #example-two #magic-line-two { 
     position: absolute;
     float: none;
     top: 0; left:
     0; width:100px;
     background: #000;
     opacity:0.4;
     filter: alpha(opacity = 40);
     z-index: 100;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px; 
    }

HTML

以列表格式设置，实际上没有什么特别的东西会影响调整大小。

如果有人知道为什么导航会在大多数时间正确调整大小而在其他时候分崩离析，我将非常感激。我似乎很擅长让代码崩溃，但只有 10% 的时候。

谢谢

Answer 1

$mainNav2.height() 是问题所在，因为 ul 的 line-height 为 60px 因此阴影部分也将获得可用高度。

此外，这个 #magic-line-two 在我的屏幕上的宽度是 1207，这似乎是屏幕尺寸而不是 ul。

还有 #example-two #magic-line-two {} 毫无意义，因为 #magic-line-two 在任何方面都应该是唯一的 :)