Ошибка в IE7 при заполнении списка <ul>с помощью JQuery: элементы, появляющиеся под ранее скрытыми элементами

Question

В следующем скрипте javascript я использую следующий код, чтобы очистить список <ul> стран и пополнить его (с небольшой анимацией с использованием функции hide () jquery).

Он работает в Chrome и Safari, но в IE новые <li> элементы <ul> появляются позади ранее показанных <li>.Есть ли обходной путь для этого?

        $('#country_list').hide(300,function(){
            var i;
            $(".country_list").empty();
            $(".country_list").height(0);
            $(".country_link").remove();
            $("#content").append('<div id="country_list_div" class="grid_3 "><ul id="country_list"></ul></div>');
            var country_list= country_dict[letter];
            var country_count = country_list.length;
            for (i=0;i<country_count;i++)
            {
                $("#country_list").append('<li><a class="country_link" href="" id="'+country_list[i][0]+'" na="'+country_list[i][1]+'">'+country_list[i][1]+"</a></li>");
            }

            $('#country_list').show(300);
            return false;
        });

Вот соответствующий html, как его спросили (Вы можете увидеть все это на http://populationpyramid.net тоже)

       <div id="content" class="container_12">
        <div id="canvas_container_div" class="grid_7 " >
            <div id="canvas_container" ></div>
        </div>

        <div id="year_list_div" class="grid_1 " style="display: table-cell; vertical-align: middle;">
            <ul id="year_list">
            </ul>
        </div>

        <div id="alpha_list_div" class="grid_1 ">
            <div style="margin-left:11px;">
            <ul id="alpha_list">
            </ul>
            </div>
        </div>

        <div id="country_list_div" class="grid_3 ">
            <ul id="country_list">

            </ul>
        </div>
    </div>

Answer 1

зачем убирать оригинал ul?также вы удаляете ".country_list", а не "#country_list"

Возможно ...

$"#country_list").hide(300, function(){

  var cl = $(this); //get a variable handle
  cl.empty();
  var items = country_dict[letter];

  for (var i=0 i<items.length; i++) {
    cl.append(([
      '<li>'
        ,'<a class="country_link" href="javascript:void(0);"'
          ,' id="' + items[i][0] +'"'
          ,' na="' + items[i][1] + '"'
        ,'>'
          ,items[i][1]
        ,'</a>'
      ,'</li>'
    ]).join(''));
  }

  cl.show(300);

});

Answer 2

Убедитесь, что вы указали размер (высоту или ширину) контейнера, IE стремится передавать его содержимое в противоположность позициям перезаписи. Я всегда люблю обрезать свои контейнеры, чтобы они никогда не вытекли.