2011-03-14 131 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