我在Chrome中遇到了一个奇怪的错误，我的固定导航下拉菜单在悬停时没有正确显示在HTML5视频代码上。如果你检查Firefox它的工作完全没问题，但是Chrome似乎仍然可以隐藏，但仍然可以点击。我在下拉列表和视频上尝试了多种可能的解决方案-webkit-backface-visibility，以及旧的Flash / YouTube嵌入式解决方案中可能的wmode =透明属性，但没有任何工作。
可以在以下网址查看问题：
http://spencerfink.net/capers/
注意：我的导航和下拉菜单必须是位置：固定以使它们始终位于页面顶部，无论用户滚动的位置如何。位置：元素的绝对或相对变化不符合我的需要。
我可以让下拉列表显示在Chrome中的唯一方法是将包含视频的#banner div更改为z-index为-1，但这会干扰我的“联系我”汇总部分。页面和更多z-index shuffling最终将导航栏从页面顶部的固定位置分离。
此问题也发生在使用Owl Carousel的网页上，但我认为解决方案类似或相同。
冲突地区的HTML
<div id="navbar">
<a href="index.html"><img src="images/capers-logo.png" height="80px" width="115px"></a>
<a href="index.html" id="capers">Creative<br></a>
<ul id="nav">
<a href="index.html"><li>Home</li></a>
<a href="our-work.html"><li id="dropdown">Our Work
<div id="our-work">
<ul>
<a href="marketing-landing.html"><li class="blue">Marketing</li></a>
<a href="augmented-reality.html"><li id="blue">Augmented Reality</li></a>
<a href="brand-development.html"><li id="blue">Brand Development</li></a>
<a href="explainer-videos.html"><li id="blue">Explainer Videos</li></a>
<a href="entertainment-landing.html"><li class="orange">Entertainment</li></a>
<a href="animation.html"><li id="orange">Animation</li></a>
<a href="games-apps.html"><li id="orange">Games/Apps</li></a>
<a href="creative-design.html"><li id="orange">Creative Design</li></a>
</ul>
</div>
</li></a>
<a href="#"><li>News</li></a>
<a href="contact-us.html"><li>Contact Us</li></a>
</ul>
<img id="mobile-icon" onClick="toggleMenu()" src="images/menu.png">
<div id="mobile-menu">
<ul>
<a href="index.html" onClick="closeMenuLink()"><li>Home</li></a><br>
<a href="our-work.html" onClick="closeMenuLink()"><li id="dropdown">Our Work</li></a><br>
<a href="marketing-landing.html"><li class="blue">Marketing</li></a>
<a href="entertainment-landing.html"><li class="orange">Entertainment</li></a>
<a href="#" onClick="closeMenuLink()"><li>News</li></a><br>
<a href="contact-us.html" onClick="closeMenuLink()"><li>Contact Us</li></a>
</ul>
</div>
</div>
<div id="banner">
<video id="video" autoplay preload="auto" poster="images/placeholder.jpg">
<source src="videos/placeholder.mp4" type="video/mp4">
<source src="videos/placeholder.webm" type="video/webm">
<source src="video/placeholder.ogv" type="video/ogg">
</video>
<a href="marketing-landing.html"><div class="gradient-left" id="gradient-blue-left"></div></a>
<a href="entertainment-landing.html"><div class="gradient-right" id="gradient-orange-right"></div></a>
<a href="marketing-landing.html"><div id="arrow-left"><h2>Marketing</h2></div></a>
<a href="entertainment-landing.html"><div id="arrow-right"><h2>Entertainment</h2></div></a>
<a href="#scrolldown">
<div id="explore" class="green">
<h3>Explore</h3>
<div id="arrow-down"></div>
<div id="scrolldown"></div>
</div>
</a>
相关CSS
#navbar {
position: fixed;
overflow: hidden;
top: 0;
font-size: 1.15em;
width: 100%;
max-width: 100%;
height: 80px;
z-index: 3;
background-color: rgba(0, 179, 188, .4);
/*background-color: rgba(255, 255, 255, .8);*/
/*background-image: url(../images/navbar-tiki-pattern.png);*/
box-shadow: 0 2px 2px #555555;
transition: .2s ease-out;
}
#navbar:after {
background-image: url(../images/navbar-texture.jpg);
background-size: cover;
background-repeat: no-repeat;
background-clip: border-box;
position: fixed;
width: 100%;
max-width: 100%;
height: 80px;
overflow: hidden;
top: 0;
left: 0;
opacity: .9;
z-index: -1;
content: ' ';
transition: .2s ease-out;
}
#navbar ul {
position: relative;
list-style: none;
display: inline-block;
margin: -3px 0 0 0;
padding-left: 0;
}
#navbar ul li {
position: relative;
list-style: none;
text-decoration: none;
display: inline-block;
padding: 0 35px;
margin-left: -4px;
margin-top: 0;
line-height: 86px;
transition: .2s ease-out;
opacity: 1;
}
#navbar ul a:first {padding: 0 40px 0 0;}
#navbar ul li:hover {
background-color: rgba(255, 255, 255, .95);
opacity: 1;
color: #7ccd05;
line-height: 78px;
border-top: 8px solid #7ccd05;
}
#navbar a {
font-weight: bold;
text-decoration: none;
color: white;
}
#dropdown:hover a:first-child {color: #7ccd05 !important;}
#dropdown:hover #our-work {height: 120px;}
#our-work {
position: fixed;
top: 80px;
width: 100%;
background-color: rgba(255, 255, 255, .92);
height: 0;
overflow: hidden;
z-index: 4;
line-height: 40px;
box-shadow: 0 2px 2px #555555;
left: 0;
transition: .3s ease-out;
}
#our-work ul {
width: 100%;
}
#our-work ul li {
position: relative;
list-style: none;
text-decoration: none;
display: inline-block;
text-align: center;
border-right: 1px solid #eeeeee;
border-bottom: .5px solid #eeeeee;
padding: 15px 0 0 0;
width: 24.95%;
z-index: 3;
min-width: 190px;
height: 45px;
line-height: 30px;
transition: .2s ease-out;
opacity: 1;
}
#banner {
position: relative;
background-color: white;
text-align: center;
top: 0px;
margin-top: 80px;
width: 100%;
height: auto;
z-index: 1;
max-height: 1000px;
background-position: center;
background-attachment: fixed;
/*background: #f5f6f6; /* Old browsers */
/*background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* IE10+ */
/*background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}
#banner img {
width: 100%;
height: auto;
position: relative;
top: 0;
left: 0;
}
#banner video {
width: 100%;
height: auto;
margin-top: -80px;
position: relative;
z-index: 0;
top: 0;
left: 0;
}
非常感谢，我一直在网上寻找答案！
答案 0 :(得分：5)
添加
-webkit-transform: translateZ(0)
有问题的元素，它会解决所有问题。