3

我有一个网页，其样式为 div 内的固定侧边菜单，具有以下 css 样式：

div#sidemenu
{
  top: 120px; left: 800px;
  width: 135px; 
  height: 560px;
  background-image: url(img/bg.png);
  position: fixed;  
  z-index: 30;
}

div很简单：

<div id="sidemenu">
<ul>
<li>link1</li>
...
<li>linkn</li>
</ul>
</div>

当您向下滚动页面时，它应该保持固定。

它适用于 Windows 和 MacOS 上的所有非 Safari 浏览器（IE、FF、OP），甚至适用于 Windows 版本的 Safari，但不适用于 MacOS Safari。

在 MacOS Safari 中，它保持固定，但在滚动时会上下跳跃/颤抖/颤抖。

我针对这个问题研究了一段时间，比较了 css 的能力，降低了 z-index 并尝试修复底部。似乎没有任何效果。

有没有人也经历过这样的事情？并且：你能解决它吗？

附加信息：

  • bg 图像是带有透明胶片的 png
  • bg 图像的大小与容器 div 一样完美
4

1 回答 1

1

我在跳跃 bg 图像方面也有类似的经历，一种似乎是跨浏览器的解决方法是在包装 div 中添加一个 div。重要的是给新的 div 一个高度，否则移动 safari 可能会在滚动时调整它。

<div id="sidemenu">
<div id="bg"></div>
<ul>
<li>link1</li>
...
<li>linkn</li>
</ul>
</div>
div#sidemenu
{
  top: 120px; left: 800px;
  width: 135px; 
  height: 560px;
  position: fixed;  
  z-index: 30;
}

#bg {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    height: 500px;
    background-image: url(img/bg.png);
    background-position: 0 0;
}
于 2014-04-26T01:18:34.013 回答