在 IE6 和 IE7 中滚动 div 时，jQuery UI 按钮不会移动（有时会消失）答案

【问题标题】：jQuery UI Button doesn't move when scrolling a div in IE6 and IE7 (and disappears sometimes)在 IE6 和 IE7 中滚动 div 时，jQuery UI 按钮不会移动（有时会消失）
【发布时间】：2011-07-26 08:07:00
【问题描述】：

我有一个可滚动的 div（主页没有滚动条）和一个可滚动内容中的 jQuery UI 按钮。在 IE6 和 IE7 中，按钮不会随着 div 的内容滚动，如果您将鼠标放在它不正确的位置时，它会做一些有趣的事情。

这是一个例子（jQuery 1.5 包含在标题中）：

<link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" />
<script type="text/javascript" src="Lib/jquery-1.5.min.js"></script>
<script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"></script>

<div style="width: 400px; height: 300px; overflow: scroll;">
    <div style="width: 400px; height: 1200px;">
        Hello world<br /><br />
        <a href='#' id='test'>test button</a>
    </div>
</div>
<script>
    $('#test').button();
</script>

我找到了一种解决方法，但它并不完美；我捕捉到滚动事件并在按钮元素上调用.button('enable')（出于某种原因.button('refresh') 没有做任何事情）。它使按钮正确滚动，但现在按钮在滚动时显示在 div 之外（它向上滚动到 div 的顶部并且仍然可见）。代码如下：

<link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" />
<script type="text/javascript" src="Lib/jquery-1.5.min.js"></script>
<script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"></script>

<div class='scrollingDiv' style="width: 400px; height: 300px; overflow: scroll;">
    <div style="width: 400px; height: 1200px;">
        Hello world<br /><br />
        <a href='#' id='test' class='scrollingButton'>test button</a>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#test').button();

        $('.scrollingDiv').scroll(function() {
            $('.scrollingButton').button('enable');
        });
    });
</script>

【问题讨论】：

方法“按钮”在哪里定义？据我所知，它不是 jQuery 的一部分。
在jQueryUI中（从代码中看不清楚，但在第一句话中提到了）
嗯。奇怪，我在我的小提琴中添加了 jQueryUI，但没有按钮支持。 jsfiddle.net/bhofmann/9pPa8
我们也有同样的问题，影响 IE6 和 7 - 如果我们不必支持它们的话......

标签： jquery internet-explorer jquery-ui internet-explorer-7 internet-explorer-6

【解决方案1】：

我认为你必须在脚本标签的开头添加以下句子：

    $(function(){

你的代码在这里

});

这意味着脚本将在 dom（页面）准备好时加载。

您还可以在标签上添加属性 type="text/javascript"

我认为这会奏效！

【讨论】：

投反对票，因为这个 [a] 不能解决问题，而 [b] 只是一个建议。请在发布答案之前尝试重现并解决问题。
这些都是很好的补充，但并没有解决问题。感谢您的评论:)

【解决方案2】：

这似乎与 jQuery http://bugs.jqueryui.com/ticket/5281 中的一个错误有关

解决方法是将position:relative; 设置为滚动容器。

正如 fracmak 在 jQuery 票证中所评论的那样：IE7 存在 div 溢出问题（滚动和隐藏）。这不是 ui-button 控件可以真正控制/检测的东西。

【讨论】：

【解决方案3】：

为手风琴、标签、输入[type=submit]等添加了解决方法#2： http://bugs.jqueryui.com/ticket/5281#comment:10

【讨论】：