bootstrap下拉列表中的输入标记在Safari浏览器中无法正常工作

Question

我一直在努力让jQueryFileUpload正常工作但是我遇到了一个只出现在Safari上的奇怪问题，特别是我正在使用（5.1.7 7534.57.2）。

我有一个输入元素，我使用插件jQueryFileUpload进行初始化，以允许文件上传。然后，此插件会侦听选择文件等事件，在这个简单示例中，您应该在选择文件后立即看到进度条。

下面是我为输入标记设置样式的配置。

<span class="btn btn-success fileinput-button">
    <i class="icon-plus icon-white"></i>
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
</span>     

当这段代码在bootstrap下拉时，会出现safari上的问题。它仍然允许您单击并选择一个文件，但是一旦您选择了该文件，就不会发生任何其他情况（因此您将看不到进度条），也不会触发任何错误，或者它似乎没有冒泡到它应该的位置

我已经在https://github.com/newtonianb/jfl_safari创建了一个包含该项目的回购，我非常感谢您在理解正在发生的事情上提供任何帮助。

主分支在下拉列表中有输入，因此它不适用于safari。 工作分支在主体中只有相同的输入标记，而在此处它可用于safari。

为什么这个问题只发生在safari的下拉菜单中，我该如何解决？ 任何反馈将不胜感激！

Answer 1

您必须更新一些Bootstrap CSS才能使其正常工作。

将以下CSS添加到一些CSS文件中以覆盖Bootstrap CSS：

.dropdown-menu {
    display: block;
    visibility: hidden;
}

.open .dropdown-menu {
    visibility: visible;
}

此CSS修复程序适用于Safari 5.1.7