css - 在 Firefox 中使用相对位置时背景图像消失

Question

所以我想在我正在处理的网站的右上角添加一个徽章。 z-index 用于将对象 float 到页面内容上方，但每次我尝试使用相对位置时，背景图像都会消失，只有绝对位置显示图像。我真的不想使用绝对，因为图像需要定位在网站菜单栏的右侧，而不是视口(viewport)的右侧。

感谢任何想法或建议

<div class="badge-box">
<a href="http://www.google.com" class="badge">Book Now!</a>
</div>

<div id="header">
<a href="index.php"><img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" /></a>
</div>

<div id="main-menu">
<div>
<a href="/">Home</a>
<a href="/cottages.php">Our Cottages</a>
<a href="/gwynfryn.php">Bed &amp; Breakfast</a>
<a href="/rates.php">Price Guide</a>
<a href="/llanbedr.php">Location &amp; Local Attractions</a>
<a href="/news.php">News &amp; Special Offers</a>
<a href="/contact.php">Contact Us</a>
</div>
</div>

.badge-box {
    width: 1030px;
    margin-left: auto;
    margin-right: auto;
    border: 0px solid red;
}

.badge {
    background: url(../images/badge.png) 0px 0px no-repeat;
    width: 148px;
    height: 148px;
    text-indent: -10000px;
    position: relative;
    z-index: 999;
}

#header {
    width: 960px;
    height: 40px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    padding: 20px 0px 0px 20px;
    background: #58564f url(../images/header-top-background.png);
}

#main-menu {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    height: 35px;
    /*background: red;*/
    background: #58564f url(../images/header-bottom-background.png);
    font-family: Georgia, "Times New Roman", Times, serif;
}

#main-menu div {
    width: 776px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    background: blue;
}

#main-menu div a {
    display: block;
    float: left;
    padding: 5px 10px 0px 10px;
    height: 30px;
    color: #FFFFFF;
    font-size: 1.2em;
    text-align: center;
    background:  green;
}

#main-menu div a:hover {
    background-color: #333333;
}

Answer 1

除非您在该 .badge 类上执行 display:block，否则您定义的许多样式将不会生效，因为它默认为内联。也许这就是您开始所需要的一切。

我不确定你想要达到的效果是什么。你能发布模型的 png/jpeg 吗？