css - 固定 div 背景重叠浏览器滚动条

Question

我以前从未见过的非常奇怪的行为。

我有一个固定位置的 div，它有一个透明的 png 背景图像。 z-index 设置为 -1，以便内容可以使用滚动条在固定图像上滚动。

我将其定位在底部和右侧 0 像素处，但图像与滚动条重叠(无论如何在 FF 和 Safari 上。)

这是链接:

http://adamjcas.www59.a2hosting.com/pg/show/id/4

CSS:

#plants /*for the cut paper plants in the background*/
{
    background: transparent url(../background_images/plants.png) no-repeat;                                         
    bottom:0px;
    right:0px;
    z-index: -1;
    position:fixed;
    height:691px;
    width:475px;        
}   

我使用的一个 hack 是使用 右:16px；

效果很好，因为总是(可能)有一个右滚动条。但底部卷轴只是有时存在。这是一个简单的 CSS 问题吗？

Answer 1

这是一个奇怪的问题。但我发现滚动条不是来自浏览器，而是来自具有 overflow: auto 的父 div。

我就是这样解决的。更改 div id="rightpanel" 的样式以删除 overflow: auto;。

然后更新 #rightcontent 样式如下:

#rightcontent {
    left: 445px;
    padding-top: 127px;
    position: relative;
    width: 650px;
}

希望这能解决所有浏览器的问题。除此之外，我还发现浏览器提示找不到 Cufon.js。您可能也想研究一下。