Question

我正在编写一个网页，我在Opera和Maxthon浏览器中有一个div消失的问题（使用firefox工作正常）。

div是一个简单的菜单，具有固定的位置，随着窗口滚动向下滑动，但是当点击其中的链接时，它将向下滚动但有时它会消失，直到我再次滚动。

我只使用HTML和CSS，我对Javascript或其他任何东西都不了解，但这很烦人。有办法解决这个问题吗？

相关代码：

HTML：

<div id="menu">
    <ul>
        <li><a href="#about">About Us</a></li>
        <li><a href="#merch">Merchandise</a></li>
        <li><a href="#contact">Contact Us</a></li>
    </ul>
</div>

CSS：

#menu
    {
        position: fixed;
        margin-left: 5px;
        margin-top: 10px;
        width: 14%;
        height: 100px;
        border: 3px red solid;
        background: white;
        z-index: 100;
}

#menu ul
{
        position: absolute;
        float: left;
}

Answer 1

尝试使用left和top代替margin设置其位置。

#menu
    {
        position: fixed;
        left: 5px;
        top: 10px;
        width: 14%;
        height: 100px;
        border: 3px red solid;
        background: white;
        z-index: 100;
}

<强>更新

我搜索了一下，它似乎是一个已知的Opera Bug。

解决方法是不断为某些不会影响布局的属性设置动画，但会导致引擎重绘元素。因此，使用CSS动画并使用几乎不存在的阴影定位box-shadow可以解决问题。

#menu
{
    position: fixed;
    margin-left: 5px;
    margin-top: 10px;
    width: 14%;
    height: 100px;
    border: 3px red solid;
    background-color: white;
    z-index: 100;
    -webkit-animation:noop 0.1s infinite; /*fix for maxthon*/
    animation: noop 0.1s infinite; /*fix for opera*/
}

@keyframes noop {/*fix for opera*/
  0%   { box-shadow:0 0 0 rgba(0,0,0,0.1); }
  100%   { box-shadow:0 0 1px rgba(0,0,0,0.1); }
}
@-webkit-keyframes noop{/*fix for maxthon*/
  0%   { box-shadow:0 0 0 rgba(0,0,0,0.1); }
  100%   { box-shadow:0 0 1px rgba(0,0,0,0.1); }
  }

（在我的歌剧中，在开始动画之前有一段延迟，所以如果你马上开始点击，可能会在第一次修复问题之前有一段延迟.. ）

另一个解决方案是升级Opera（，因为它现在是 v21 ）

Div消失，直到我在Opera中滚动

1 个答案: