Не могу понять, почему jQuery.UI ломает позиционирование автозаполнения в IE 9 - работает в IE 8, Firefox, Chrome -

Question

Страница может быть найдена по адресу: http://www.geobytes.com/index.php/moversratesballparkestimator

У меня есть два поля автозаполнения на приведенной выше странице.Переезд в город и переезд из города.После ввода трех символов Autocomplete выполняет Ajax-вызов для значений города.В IE 8, Chrome и Firefox возвращенный список отображается под текстовым полем ввода.Я должен отметить, что этот элемент абсолютно позиционирован.В IE 9 список отображается в окнах 0, 0 (верхний левый угол).Я проверил демонстрации jQuery UI Autocomplete, и они корректно отображаются в IE 9. Поэтому я полностью потерян, и любая помощь будет принята с благодарностью.

Единственные изменения css, которые я сделал:

.ui-menu .ui-menu-item a,.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
text-align:left;
font-size:14px;
}

.ui-autocomplete-loading { background: white url("/images/ui-anim_basic_16x16.gif") right center no-repeat; }

и вызов javascript:

jQuery( "#ff_elem184" ).autocomplete({
            source: function( request, response ) {
                jQuery.ajax({
                    url: "/AJAX_query_city.php", 
                    dataType: "json",
                    data: {
                        value: request.term
                    },
                    success: function( data ) {
                        response( data ); 
                    }
                });
            },
            minLength: 3,
            select: function(event, ui) {
                var selectedObj = ui.item;
                jQuery( "#ff_elem184" ).val(selectedObj.value);
                ff_getdistance(selectedObj.value,jQuery( "#ff_elem189" ).val());
                return false;
                },
            open: function() {
                jQuery( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                jQuery( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
        jQuery( "#ff_elem184" ).autocomplete( "option", "delay", 100 );

        jQuery( "#ff_elem189" ).autocomplete({
            source: function( request, response ) {
                jQuery.ajax({
                    url: "/AJAX_query_city.php", 
                    dataType: "json",
                    data: {
                        value: request.term
                    },
                    success: function( data ) {
                        response( data ); 
                    }
                });
            },
            minLength: 3,
            select: function(event, ui) {
                var selectedObj = ui.item;
                jQuery( "#ff_elem189" ).val(selectedObj.value);
                ff_getdistance(jQuery( "#ff_elem184" ).val(),selectedObj.value);
                return false;
            },
            open: function() {
                jQuery( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                jQuery( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
        jQuery( "#ff_elem189" ).autocomplete( "option", "delay", 100 );

Как я уже сказал, я застрял, потому что я использую его в соответствии с документами и демонстрационными работами, а моя - нет.Теперь я должен также упомянуть, что это выполняется в компоненте breezingforms в Joomla 1.6, и на этой странице работает довольно много других jQuery javascript.Заранее благодарим за любую помощь или предложения.

Answer 1

Я столкнулся с той же проблемой. Он исчез, когда я включил jquery.ui.position.js. Это может быть причиной, по которой он где-то ломается.

Answer 2

Немного поздно, но у меня была такая же проблема только во всех браузерах.Мой был вызван наличием плагина jquery.dimensions на моей странице.Внутри функции ui.autocomplete _suggest она вызывала неправильную функцию ui.position.Удален плагин измерения, который согласно странице документа был включен в ядро ​​jquery, и проблема была решена.

Answer 3

IE 9.0 использует элемент body для измерения верхнего и левого значений для offset (), но использует край окна, когда измеряет верхнее и левое расстояния при позиционировании элемента абсолютно.

Исправить ширину тела.Это может сработать.

body {
    width: 900px;
}