Safari 中的 Bootstrap 下拉菜单为空白（白色）答案

【问题标题】：Bootstrap dropdown menu is blank (white) in safariSafari 中的 Bootstrap 下拉菜单为空白（白色）
【发布时间】：2013-11-26 15:19:55
【问题描述】：

我正在使用 bootstrap 2.3.2 和 drupal 7 运行一个站点。当菜单折叠到 980 像素以下时，它会在除 safari 之外的所有浏览器中完美下降。在 safari 中，菜单会下拉，但在 480 像素以下，其上的链接要么是白色的，要么是空白的。如果您将鼠标悬停在它们上方，它们就会出现。

开发地址： http://schoensten.janeschindler.ch/cms/de

截图问题： http://janeschindler.ch/ftp/broken.png

样式表中没有任何东西特别与 480px 相关联。如果您使用 safari 中与 firebug 等效的信息面板（例如 width:100%）向链接添加某些属性，它们会再次出现。但是，如果您在 css 中设置这些属性，或者使用 javascript，它不会产生任何影响，并且它们会保持空白，直到您将它们翻转。如果您使用 jquery 在页面加载时保持菜单打开 ($('.nav-collapse').css("height", "auto");)，则链接会在您加载页面时显示，但如果您折叠菜单并再次打开它。该问题也出现在 iPhone 上更新的 safari 版本中。

如果有人知道如何解决这个问题，将不胜感激。

【问题讨论】：

只需将样式添加到您自己的 CSS。
谢谢——我试过了。但是添加样式并不能解决问题，即使我指定了菜单项的颜色、宽度和 z-index。

标签： jquery twitter-bootstrap drupal-7

【解决方案1】：

解决此问题的一种方法是延迟向 css 添加内容。这是我现在的菜单 jquery。

$('.btn-navbar').toggle(function(){
    $('.nav-collapse').css("height", "auto");
    $('.nav-collapse')
        .delay(10)
                   .queue(function() {
                       $(this).css("color","black");
                       $(this).dequeue();
                   });
}, function () {
    $('.nav-collapse').css("height", 0);
    $('.nav-collapse')
        .delay(10)
                   .queue(function() {
                       $(this).css("color","white");
                       $(this).dequeue();
                   });

});

【讨论】：