2011-03-14 90 views
0

我使用了一个名为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%的时间。

感谢

回答

1

$mainNav2.height()是哪里出了问题是因为ul具有60pxline-height因此树荫的事情也将获得可用的高度。

另外这个#magic-line-two的宽度是1207在我的屏幕上,它看起来像它的屏幕尺寸不是ul

#example-two #magic-line-two {}是如此毫无意义的,因为#magic-line-two应该是唯一的任何方式:)

+0

你尝试在Firefox网页?或通过点击链接?行高拉120px。我试着完全删除行高属性,当导航栏打破时,它仍然会跳到120px的高度。我的主要问题是大部分时间都抓住了正确的值,我无法弄清楚其他值来自哪里。 120px high没有列出任何地方 1900px宽(明显的显示器宽度)将是有意义的,除了几乎每次它加载它抓住正确的宽度。我看不出为什么它会抓住显示器的宽度。 按照建议固定CSS。 – Sciar