Question

我正在使用jquery.multiselect库，它在chrome中完美运行。

我使用的css样式可以查看here

用法：

$("#component").multiselect(
            { 
                multiple: true,
                height: '30px', 
                selectedText: "# selected",
                noneSelectedText: "Select Items", 
                checkAllText: "All",
                uncheckAllText: "None"              
            });

这在chrome中运行完美，但是当我尝试在firefox或IE中查看时，打开选择后，它会向下移动到屏幕的左下角，看起来像是z-索引根本不起作用。我对此进行了一些研究，听起来jQuery 1.8.1（我正在使用）可能存在错误，但hotfix 似乎没有用。

为什么这会在Chrome中运行，但在其他浏览器中却没有？

报道的问题here似乎非常相似。

我可能有效地注意到我将组合框放在手风琴中，但由于它适用于铬合金，我相信这不应成为问题。我担心这个位置：绝对（在某些样式中）可能会在某些浏览器中引起问题，但它可能是一个红色的鲱鱼。

我迷失了这个，请帮忙！感谢。

Answer 1

如果您使用的是jQuery 1.8+，则可能是由outerHeight(false)的新实现引起的。

在jquery-ui-multiselect-widget版本1.13源代码行573中：顶部：pos.top + button.outerHeight（），

将此更改为：

top: pos.top + button.outerHeight(false),

解决了我的问题。

Answer 2

你可以尝试的一个技巧是使用firebug或chrome检查器来找出有问题的元素 - 最外层元素不是它应该的位置。尝试将“position：relative”添加到此元素的父级。这可能会使它至少更接近你需要的地方。如果这不起作用，请尝试将“position：relative”添加到父级的父级，依此类推，直到问题得到解决。

Answer 3

我不知道为什么，在我的多选项版本中购买下拉列表的样式中缺少position: absolute并在某些情况下导致问题。

将其添加到.ui-multiselect-menu课程解决了问题。

jQuery UI多选渲染组件远离实际控制

3 个答案: