CSS 下拉菜单在 Chrome 按钮单击和悬停时向下滚动页面

Question

咆哮

所以我花了一个多小时在纯 css 下拉和关闭菜单上，我认为它非常漂亮，然后只有在完成所有样式并使其在我的网站上看起来不错之后，我才决定在 Chrome 中查看。哎呀

问题

为什么我的纯 css 下拉菜单使 Google 的 Chrome 在单击按钮时向下滚动页面？有没有一种简单的方法可以让它同时兼容 FF 和 Chrome?

提示

这与菜单是 position: fixed header 有关，但我不知道为什么 Firefox 的行为符合我的要求，而 Chrome 拉动 IE。

例子

这是 jsfiddle 上的精简示例

http://jsfiddle.net/Hastig/a77ewh89/

在 chrome 中查看与 firefox 的区别
单击 menu1、menu2 或 menu3 以激活下拉菜单
不包括菜单关闭按钮代码，因为它没有区别

线索

这是关于 Chrome 位置处理的问题：已修复；
使用边距或高度错误的幻灯片效果的变化 chrome 同样的方式。
在完整的 site-ready 版本中，我有一个点击关闭按钮，它在 FF 和 Chrome 中都可以正常工作，它可以向上滚动菜单。当在 Chrome 中单击关闭按钮时，滚动错误不会反转页面滚动。
我还在完整版中为按钮添加了悬停样式。打开下拉菜单后，在 Chrome 中，将鼠标悬停在这些按钮上也会使页面向下滚动。
到达页面底部后滚动问题结束。

代码

css

.header {
    position: fixed;    top: 20px;
    background-color: rgba(0,0,0,0.8);
}

.button {
    color: white;
    display: inline-block;
}

.menu {
    width: 500px; height: 0px;
    overflow: hidden;
    transition: all 1s;
    color: white;
}

#menu1:target, #menu2:target, #menu3:target {
    height: 300px;
}

.content {
    margin: 80px 0px 0px 0px;
    width: 500px;
    background-color: red;
}

.filler-divs {
    font-size: 40px;
    color: white;
}

html

<div class="header">
    <a class="button" id="button1" href="#menu1">Menu 1</a>
    <a class="button" id="button1" href="#menu2">Menu 2</a>
    <a class="button" id="button1" href="#menu3">Menu 3</a>

    <div class="menu" id="menu1">menu 1</div>
    <div class="menu" id="menu2">menu 2</div>
    <div class="menu" id="menu3">menu 3</div>
</div><!-- end header -->

<div class="content">
    <div class="filler-divs">filler filler filler filler filler filler filler filler filler filler</div>
    <div class="filler-divs">filler filler filler filler filler filler filler filler filler filler</div>
<!-- add lots more of these divs to fill the page with text so you can see it scroll down - scrolling stops at page bottom -->  
</div><!-- end content -->

Answer 1

没有必要放弃纯粹的 CSS 方法。请参阅下面的示例。解决方案是将所有内容放在一个容器元素中，该容器元素复制您的正文元素，但 Chrome 不会滚动浏览以尝试显示菜单元素。

新版本：http://jsfiddle.net/scarl3tt/dm89g0m5/

A div.fake-body 必须包裹你的 .content class:

.fake-body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    overflow-y: auto;
}

...并且您的 .header 需要在 DOM 中在此之后移动或标记为 z-index: 1 以确保它显示在假体上方并且能够与之互动。

CSS 下拉菜单在 Chrome 按钮单击和悬停时向下滚动页面

CSS Dropdown Menu Scrolls Page Down In Chrome On Button Click and Hover

html

css

google-chrome

css-position

drop-down-menu