IE7/8的jquery排序会导致窗口的顶部卡住

Question

我有一个与IE相关的问题，每当窗口的大小小于可用内容(例如窗口模式)时，滚动条变得可用[正常行为]。只在ie7/8中(9只在兼容模式下有这个问题，没有兼容模式就无法工作)，我知道IE9的jquery。排序问题))，当我需要在页面上向下滚动以与这些元素进行交互时，当我开始拖动其中一个元素时，窗口会恢复到页面顶部，导致字段集移出视口。在其他浏览器中，或者没有滚动窗口内容时，这不是问题。

在我的内容的底部，我有一个jquery可排序的div里面有两个字段集。与这些字段集(包含在公共div中)中的数据交互的正常行为是在两者之间拖动无序的列表项(ul> li)。

有没有人见过这样的问题——IE在与拖放元素交互后会回到页面顶部，导致元素移出视窗?

一些代码:

<!-- language: lang-html -->
<div id="rateEditor" class="rateEditorCL">
    <fieldset>
         <legend>Available Calling Plans</legend>
         <ul id="inactiveProductList" class="ratePlanList ui-sortable" unselectable="on" style="-moz-user-select: none;">
             <li class="ratePlan" data-planid="7">Africa</li>
             <li class="ratePlan" data-planid="5">India</li>
         </ul>
    </fieldset>
    <fieldset>
         <legend>Assigned Calling Plans</legend>
         <ul id="activeProductList" class="ratePlanList ui-sortable" unselectable="on" style="-moz-user-select: none;">
             <li class="ratePlan" data-planid="1" style="">Mexico</li>
             <li class="ratePlan" data-planid="3" style="">Asia</li>
         </ul>
     </fieldset>
</div>

和jquery:

<!-- language: lang-js -->
// create a sortable, exchangable list of the Available and Active Rate plan lists.
$('#inactiveProductList, #activeProductList').sortable({
    // connect the lists by the ratePlanList class
    connectWith: ".ratePlanList",
    // contain the drag/drop to the wrapper div
    containment: '#rateEditor',
    // when a list recieves a new item, spin  the elements into
    // arrays and send them off to our ajax updater function.
    receive:function(event,ui) {
        activeRates = new Array();
        inactiveRates = new Array();
        dId = $("#distributorId").val();
        uId = $("#activeUserId").val();
        $('#activeProductList li').each(function(i) {
        activeRates[i] = $(this).attr('data-planID');
    });
    $('#inactiveProductList li').each(function(i) {
        inactiveRates[i] = $(this).attr('data-planID');
    });
    updateAvailableRatePlans(activeRates,inactiveRates,dId,uId);
}
}).disableSelection();
});

和CSS(只是为了更好地衡量):

#rateEditor {
    float: left;
    margin: auto;
    text-align: center !important;
    width: 100%;
}
.rateEditorCL {
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    display: block;
    float: left;
    margin: auto;
    padding: 1em;
    text-align: center;
    width: 100%;
}

谢谢社区!

Answer 1

我最终通过做两件事自己修复了这个问题。事实证明，IE是在视窗的底部呈现我的div，而不是在相对于页面本身的位置。我仍然不知道如何解决IE如何呈现html元素的潜在问题。首先，我为容器div (#rateEditor)添加了一个"position: relative"赋值。

我还添加了以下代码用于检测IE。它与上面的代码相同，只是有一些小的不同。也就是说，将容器扩展为正文，并将div高度设置为在单击:

时扩展为文档高度。

    if ( $.browser.msie ) {
    $("#inactiveProductList, #activeProductList").sortable({
        // connect the lists by the ratePlanList class
        connectWith: ".ratePlanList",
        // contain the drag/drop to the wrapper div
        containment: "body",
        //prevents the window from following the cursor when the element is dragged
        scroll: false,
        // when a list recieves a new item, spin  the elements into
        // arrays and send them off to our ajax updater function.
        receive:function(event,ui) {
            activeRates = new Array();
            inactiveRates = new Array();
            dId = $("#distributorId").val();
            uId = $("#activeUserId").val();
            $('#activeProductList li').each(function(i) {
                activeRates[i] = $(this).attr('data-planID');
            });
            $('#inactiveProductList li').each(function(i) {
                inactiveRates[i] = $(this).attr('data-planID');
            });
            updateAvailableRatePlans(activeRates,inactiveRates,dId,uId);
        }
    }).disableSelection();
    $("div").rateEditorCL('click', function () {
        $(this).height(document)    
    });
}

我相信这个问题有更优雅的解决方案，欢迎任何知道更好的人的反馈。