Чрезвычайно странное поведение с изменением высоты div в IE7 и IE8

Question

У меня есть очень простой код HTML / JS, который расширяет размер div при наведении мыши и снова сворачивает его при наведении мыши. Код выглядит так:

CSS:

.sign-in-up {
    position: absolute;
    left: 780px;
    background-color: #8599b2;
    font-size: 9pt;
    line-height: 23px;
    color:white;
    text-align: center;
    height: 25px;        /* note this height 25px */
    width: 164px;
    overflow: hidden;
}

Тогда у меня есть мой div в HTML:

<div class="sign-in-up" id="sign-in-up"
     onmouseover="$(this).css('height','55px')"
     onmouseout= "$(this).css('height','25px')">
     my html goes here
</div>

Это прекрасно работает в Firefox (от версии 3 и выше), Safari, Chrome, Opera и IE9 - но не работает в IE8 или IE7. Когда я наводю курсор мыши на элемент div, визуально ничего не меняется. Я попытался изменить onmouseover на

onmouseover="$(this).css('height','55px');alert($(this).height())"

, и окно предупреждения показывает правильную высоту 55px, однако визуально на экране ничего не меняется, и div по-прежнему отображается как высота 25px.

Я перепробовал все возможные вещи - с точно такими же результатами. Похоже, что IE изменяет высоту div в dom, но не перерисовывает div на экране, чтобы соответствовать его новой высоте.

На этом этапе я полностью потерян. Любая помощь с благодарностью.

Редактировать

Спасибо, что ответили. После большого удара головой о стену (в данном случае экран компьютера) проблема оказалась вызвана помехами от curvycorners - библиотеки javascript для имитации закругленных углов (радиуса границы) в старых версиях IE. Выполнив свою работу, он будет активно предотвращать перерисовку затронутых элементов.

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

Answer 1

Спасибо всем, что ответили.После большого удара головой о стену (в данном случае экран компьютера) проблема оказалась вызвана помехами от curvycorners - библиотеки javascript для имитации закругленных углов (радиуса границы) в старых версиях IE.Выполнив свою работу, он будет активно предотвращать перерисовку затронутых элементов.

После удаления закругленных углов все работает хорошо, хотя выглядит хуже - но, по крайней мере, работает.Я исследую другие варианты закругленных углов.

Answer 2

Я бы предпочел более CSS-ориентированный подход.Это вытягивает вашу презентацию в CSS, где она принадлежит.

#sign-in-up {
    height:25px;
}

#sign-in-up.expanded {
    height:55px;
}

Js

$(this).addClass('expanded');

$(this).removeClass('expanded');

Answer 3

это на самом деле работает

http://jsbin.com/ebejew

Answer 4

Используйте этот простой jQuery:

$(document).ready(function() {
    $(".sign-in-up").hover(function() {
        $(this).animate({
            height: 55
        }, 10);
    }, function() {
        $(this).animate({
            height: 25
        }, 10);
    });
});​

Answer 5

Вы пытались сделать

$(this).height(55)

вместо

$(this).css('height','55px')