即使圖像存在，爲什麼在瀏覽器預覽中缺少div的CSS背景圖像？

Question

我想用CSS創建一個垂直導航欄，但使用Dreamweaver CS6，但我對CSS很陌生，並且從版本3開始直到最近才離開Dreamweaver。我在這個導航欄中爲頂部，中部和底部圖像分開了一些類。我已經使每個按鈕的整個div成爲一個鏈接，使用this technique。

中間的按鈕在設計視圖，實時模式和瀏覽器預覽中顯示得很好。但是頂部和底部按鈕僅在設計視圖中顯示。懸停和活動狀態適用於所有按鈕。我檢查並重新檢查了所有文件路徑，清除了Dreamweaver的緩存，並重新啓動了Dreamweaver。

爲什麼會發生這種情況？我該如何解決它？

下面是相關的源代碼。我正在使用12列960 grid系統。

<!-- This is inside a container_12 div with the site's header/navigation, then a clear, then an <h3> --> 
<div class="container_12"> 
    <!-- Header with site's logo and navigation goes here --> 

    <div class="clear"></div> 

    <h3>Page header</h3> 

    <div class="grid_9 prefix_2 suffix_1"> 
     <!-- Several paragraphs of copy using <p> tags --> 

     <div class="homePageVerticalButtonTop"> 
      <div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div> 
     </div> 
     <div class="homePageVerticalButtonMiddle"> 
      <div class="verticalNavigationText"><a style="display:block" href="middle1.html">middle link 1</a></div> 
     </div> 
     <!-- Several more middle links --> 
     <div class="homePageVerticalButtonBottom"> 
      <div class="verticalNavigationText"><a style="display:block" href="bottom.html">bottom link</a></div> 
     </div> 
    </div> 
</div> <!-- end container_12 --> 

下面是相關的CSS：

.homePageVerticalButtonTop { 
    /* Why is the background not showing up? */ 
    background: url(../images/homePageTopButton_normal.png) no-repeat left top; 

    width: 24.125em; 
    height: 4.125em; 
    background-size: 100%; 

    display: block; 
} 

.homePageVerticalButtonTop:hover { 
    /* This works fine */ 
    background: url(../images/homePageTopButton_mouseOver.png) no-repeat left top; 
    width: 24.125em; 
    height: 4.125em; 
    background-size: 100%; 
} 

.homePageVerticalButtonTop:active { 
    /* So does this */ 
    background: url(../images/homePageTopButton_mouseDown.png) no-repeat left top; 
    width: 24.125em; 
    height: 4.125em; 
    background-size: 100%; 
} 

.homePageVerticalButtonMiddle { 
    /* And so does the rest of these even though homePageVerticalButtonMiddle and homePageVerticalButtonTop are analogous cases and both PNGs are there. */ 
    background: url(../images/homePageMiddleButton_normal.png) no-repeat left top; 
    width: 24.125em; 
    height: 4.125em; 
    background-size: 100%; 
} 

.homePageVerticalButtonMiddle:hover { 
    background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top; 
    width: 24.125em; 
    height: 4.125em; 
    background-size: 100%; 
} 

.homePageVerticalButtonMiddle:active { 
    background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top; 
    width: 24.125em; 
    height: 4.125em; 
    background-size: 100%; 
} 

/* Bottom omitted for brevity, but it's analogous to Top and only works on the hover and active states too. */ 

.verticalNavigationText { 
    color: #FFFFFF; 
    font-family: inherit; 
    font-size: 1.75em; 
    padding: 0.59375em 0 0.59375em 0.625em; 
} 

編輯：請保持在題目的答案，解決爲什麼這些圖像將丟失。

Answer 1

Dreamweaver絕不應該被用於預覽，它自己的行爲是不相關的，因爲其他人都將使用瀏覽器。話雖如此，你的設計模式需要一點關注。

<div class="homePageVerticalButtonTop"> 
    <div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div> 
</div> 

可以更清楚地表述爲：

<div class="homePageVerticalButtonTop"> 
    <a href="top.html">top link</a> 
</div> 

你會應用到鏈接的CSS可以被表示爲：

.homePageVerticalButtonTop a { 
    display:block 
} 

...等其他造型你的鏈接應該放在那裏，比如應用到冗餘「verticalNavigationText」div的樣式。避免內聯CSS。