JQuery: маржа IE8 сворачивается при использовании slideUp()/slideDown()

Я загрузил здесь тестовый файл:

http://dl.dropbox.com/u/2201804/IE8test.html

Если вы нажмете на div "Click me", вы увидите, что divs "Feedback" появляются с помощью slideDown(). Нажатие "Щелкнуть по мне" в другом окне уменьшает текущую показную обратную связь и уменьшает соответствующую обратную связь.

В IE8 после того, как действия slideUp()/slideDown() завершены, поля между полями обрушиваются.

Это проблема с анимацией jQuery или ошибкой отображения в IE8?

Ответ 1

переполнение: скрыто;

должен выполнить работу:)

Ответ 2

У меня нет решения для использования полей, но если вы замените margin на padding, IE8 будет играть вместе. В вашем случае вам понадобится дополнительный контейнер div, потому что вы уже используете дополнение, и у вас есть цвет фона.

Итак, ваше решение может выглядеть так:

<div class="assessment">
  <div class="inner">
    <div class="question">
...

.assessment { 
  padding-top: 20px; 
  background: transparent; 
}

.assessment .inner {
  background-color:#DDDDDD;
  border:1px solid #CCCCCC;
  color:#555555;
  display:block;
  padding:10px 0;
  text-align:left;
  width:100%;
}

Приветствия TJ

Ответ 3

Просто обновить этот старый поток с помощью моего решения, поскольку я не смог решить проблему с помощью CSS. Я использовал функцию обратного вызова slideToggle, чтобы сфокусироваться на теле документа, потому что заметил, что щелчок в любом месте на странице, казалось, вызвал возврат DOM, и поля вернулись.

.slideToggle(
    500,
    function() {
        document.body.focus();
    }
);

Ответ 4

У меня все еще возникали проблемы с исчезновением полей, используя это предложение "переполнение: скрытое", и решил просто отключить функциональность slideUp/slideDown полностью в IE8, переопределив функциональность jQuery по умолчанию с помощью настраиваемой функции, которая все равно будет показывать или скрыть элемент, но только, когда использовался IE8.

Чтобы достичь этого, я использовал условный комментарий IE для добавления класса к элементу html, например:

<!--[if IE 8]><html class="ie8"><![endif]-->

Затем я определил следующую функцию в своем javascript, чтобы переопределить функцию slideUp/slideDown, например:

(function($) {
    // disable slideDown/slideUp in IE8 due to margin removal issue
    if ($('html').hasClass('ie8')) {
        $.fn.slideDown = function() {
            return this.show();
        };        
        $.fn.slideUp = function() {
            return this.hide();
        };
    }
})(jQuery);

И это решило проблему для меня, насколько я знаю. Надеюсь, это поможет!