免责声明:我意识到这是一个远景——我无法提供有效的 jsfiddle,也无法提供代码的子集。
我正在对这个网站进行最后的润色:http://dev.rebelsauce.co <强> < Edit: link corrected
重现步骤:
- 在 iPad 上打开 url
- 点击右下角的齿轮图标
- 带有“注销”的 Bootstrap 弹出窗口将出现在内容后面。从/store 页面,您实际上可以滚动到产品的末尾,您会看到它出现在
#page-products
后面。分区
来自桌面浏览器的屏幕截图:
在桌面浏览器(Chrome Win、Chrome OSX、Safari OSX)上,“注销”弹出窗口的 z-index 按预期工作 - 它设置为 position: relative; z-index: 300;
, 和 #page-products
和 .page-content
div 都设置为 postition: relative; z-index: 202 (and 203)
.
然而,在 iPad 上,z-index 并没有得到遵守。不幸的是,我不知道移动 Safari 上的任何浏览器开发工具,所以我无法使用 CSS 来确定是什么导致了它。我试过将各种父元素设置为 position: relative;
但无济于事。
我花了相当多的时间搜索关键字,例如“boostrap popover z-index ipad”,但仍然没有成功。
最佳答案
将 footer
z-index 设置为 300 为我修复了它,尽管我不知道这样做是否出于其他原因是不可取的。
如果您使用的是 Mac,您实际上可以将开发人员工具与 iOS Safari 一起使用。下载 xCode,运行 iOS 模拟器,然后导航到您的页面。然后,在 OSX Safari 中,在“开发”菜单下选择“iPad 模拟器”部分中的页面。
关于jquery - CSS z-index 不适用于 iPad 上的 bootstrap popover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17953532/