html - 为什么 div 的 CSS 背景图像在浏览器预览中丢失，即使图像存在？

Question

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

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