全宽Bootstrap下拉导航 - 在Safari中不起作用

Question

我一直在寻找一种方法来显示＆＃34;下拉导航＆＃34;全宽，幸运的是我发现了topic，由Bass Jobse回答。

不幸的是，我发现Safari浏览器存在一个兼容性问题。正如您在下图中所看到的，当我从菜单链接中移除鼠标时，下拉导航就会停留在那里，就像一个＆＃34;幽灵导航＆＃34;。

此错误仅发生在Safari浏览器中，并且似乎与属性＆＃34; position：static＆＃34;相关，因为您可以在Bootply中进行验证。

拜托，有人可以帮我解决这个问题吗？

Answer 1

Chrome没有问题，但我发现其他webkit浏览器（使用reconq测试过）确实存在上述问题。

据我所知，问题如下：

从open移除.nav > li.dropdown类后，其子级获得： position: relative（父母）display:hidden。前面的区域小于position: static（父级）display:block的宽度。

因此，在打开/不打开Webkit之间切换时，只会隐藏position: relative（父）display:hidden区域。

解决方案适用于position: static类的情况：{/ 1}：

open

因此请使用.nav > li.dropdown { position: static; } .nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; } .dropdown-menu>li { display: table-cell; } 代替nav > li.dropdown { position: static; }