Question

我正在使用bootstrap 2.3.2和drupal 7运行一个站点。当菜单在980px以下崩溃时，它会在每个浏览器中完美地下降，但是在safari中。在Safari中，菜单会下降，但低于约480px时，其上的链接为白色或空白。如果你将鼠标悬停在它们上面，它们会显示出来。

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

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

样式表中没有任何内容与480px特别相关。如果使用safari等效于firebug，信息面板（例如宽度：100％）向链接添加某些属性，它们将再次显示。但是如果你在css中设置这些属性，或者使用javascript，它就没有任何效果，它们会一直保持空白，直到你滚动它们为止。如果您使用jquery在页面加载时保持菜单打开（$（'。nav-collapse'）。css（“height”，“auto”）;），链接会在您加载页面时显示，但如果您折叠菜单并再次打开它。问题还显示在iphone的更新版本的safari中。

如果有人知道如何解决这个问题，我将非常感激。

Answer 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();
                   });

});

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

1 个答案: