Добавлено дополнительное пространство после списка при перезагрузке jQuery div в IE - PullRequest
Новая
       0

Добавлено дополнительное пространство после списка при перезагрузке jQuery div в IE

2 голосов
/ 24 июня 2011

Я пишу веб-страницу, которая обновляет список, используя jQuery, когда что-то выбирается. Ниже списка находится кнопка. Обновление отлично работает в Firefox и Chrome, но в IE между списком и кнопкой добавляется немного места при каждом обновлении. Ниже приведен упрощенный пример, который делает то же самое: 

<html>
    <head>
        <style type="text/css">
            #list {
                padding: 10;
            }
        </style>

        <script type="text/javascript" src="jquery.js"></script>
    </head>

    <body>
        <div id="test">
            <ul>
                <!-- List -->
                <li>
                    <div id="list">
                        <ul>
                            <li>before 1</li>
                            <li>before 2</li>
                        </ul>
                    </div>
                </li>

                <!-- Button -->
                <li>
                    <div>
                        <button id="button" onClick="reload();">button</button>
                    </div>
                </li>
            </ul>
        </div>
    </body>

    <script type="text/javascript">
    function reload() {
        var html = 
            "<ul>" +
                "<li>after 1</li>" +
                "<li>after 2</li>" +
            "</ul>";

        $("div#list").html(html);
    }
    </script>
</html>

Нажмите на кнопку. В Firefox и Chrome он остается на месте. В IE (9) он немного смещается (немного означает около 10 или 20 пикселей. То есть, легко заметно человеческому глазу) каждый раз, когда я нажимаю на него. Может кто-нибудь сказать мне, что вызывает это? Спасибо.

Ответы [ 2 ]

1 голос
/ 24 июня 2011

Обновление Похоже, что проблема связана с вычислением заполнения IE, а не с вашим кодом, поскольку то же самое происходит с использованием js .innerHtml () напрямую.

Я бы тогда предложил удалить отступ и добавить поля в ul, поскольку это влияет на удаляемый элемент, возможно, в этот раз поля также будут удалены. 

#list {
    padding: 0;
}
#list ul {
    margin:10;
}

http://jsfiddle.net/qEphF/6/

Согласно документации JQuery

Этот метод использует браузер свойство innerHTML. Некоторые браузеры могут не генерировать DOM, который точно Копирует предоставленный источник HTML.

Может быть, вам стоит попробовать другой подход. Например 

$("div#list").empty().append($(html));
1 голос
/ 24 июня 2011 
    <style type="text/css">
        #list {
            padding: 10;
        }
    </style>

Каждый раз, когда вы вызываете функцию перезагрузки, IE добавляет 10 отступов, что является причиной вашей проблемы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...