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

Question

我有一个滚动的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元素上调用.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> 

Answer 1

这看起来jQuery中http://bugs.jqueryui.com/ticket/5281

的解决方法是设置position:relative;的滚动容器进行相关的错误。

正如fracmak在jQuery票证中评论的那样：IE7在溢出div（滚动和隐藏）方面存在问题。这不是UI按钮控件可以真正控制/检测的。

Answer 2

我认为你必须添加，在脚本标签开始，下面的句子：

$(function(){ 

您的代码在这里

}）;

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

，你还可以添加标签上的属性类型=“文/ JavaScript的”

我认为，将工作！

Answer 3

解决方法＃2添加了手风琴，制表符，输入[类型=提交]等： http://bugs.jqueryui.com/ticket/5281#comment:10