【发布时间】：2016-11-11 04:00:41
【问题描述】：
我已经在这个错误上工作了两天了。我的主导航栏有几个带有下拉内容的可点击按钮。在桌面版 Chrome（我设计它的地方）上，无论您如何调整窗口大小（响应地适应桌面、iPad 和移动显示模式），它都可以正常工作，对于桌面版 Firefox 和 Internet Explorer 也是如此。移动版在 iPhone 5 上的 Safari、Chrome 和 Firefox 中也能完美运行。
但是，在我测试过的任何浏览器（Firefox、Chrome 或 Safari）中单击实际 iPad 时，下拉内容不会出现，并且它也不会出现在桌面版 Safari 中。虽然下拉内容显示在桌面版 Chrome 浏览器中，但 Chrome 的调试器也不会显示下拉内容，而是会显示一个框，该框应显示下拉内容。
我可以在 Chrome 调试器中看到 .dropdown-content.show 类在单击时会激活并从 display: none 更改为 display: block，但它只是隐藏在其他页面内容后面。当我删除所有其他页面内容时，我可以看到下拉内容确实可以正确切换和显示。
所以我推断问题与 Safari 和 iOS 上的某些浏览器如何理解 z-index 有关？导航栏有一个z-index: 9999，.dropdown-content 应该继承它，但我知道 z-index 的作用远不止最大的数字总是显示在顶部。
但究竟出了什么问题，我该如何解决？我尝试为.dropdown-content 手动指定opacity: 1 和z-index: 9999，并尝试添加-webkit-transform: translate3d(0,0,0) hack 描述的here 和here 以覆盖iPad 并强制硬件加速，但也许我没有实现正确破解？我是否在导航栏 css 中设置了错误的显示设置？我也很困惑，完全相同的 javascript 和显示设置如何在 iPhone 上的每个浏览器中正常工作，但在 iPad 上没有浏览器。
感谢任何见解。大约一个月前我刚开始自学网页设计，所以我确信这是一个简单的错误，但我迷路了。
【问题讨论】：
标签： javascript html css mobile-safari z-index