internet - javascript for browser




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

У меня очень простой код 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())"

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

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

На этом этапе я полностью потерян. Любая помощь приветствуется.

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

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

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


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

$(this).height(55)

вместо

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

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

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

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

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

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

Js

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

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





internet-explorer-7