为什么即使图像存在，浏览器预览中也会缺少 div 的 CSS 背景图像？

Question

我正在尝试使用 Dreamweaver CS6 设置带有 CSS 的垂直导航栏，但我对 CSS 非常陌生，并且直到最近才离开 Dreamweaver 版本 3。我在此导航栏中为顶部、中间和底部图像设置了单独的类。我使用this technique 将每个按钮的整个 div 设置为一个链接。

中间按钮在设计视图、实时模式和浏览器预览中显示得很好。但顶部和底部按钮仅显示在设计视图中。悬停和活动状态适用于所有按钮。我检查并仔细检查了所有文件路径，清除了 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。