javascript - todos - Comportamiento extremadamente extraño con el cambio de altura div en IE7 e IE8

pagina web no se ve bien en internet explorer

Question

Tengo un código HTML / JS muy simple, que amplía el tamaño de un div en el mouse y lo vuelve a colapsar con el mouse. El código se ve así:

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;
}

Entonces tengo mi div en 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>

Esto funciona perfectamente bien en Firefox (desde la versión 3 en adelante), Safari, Chrome, Opera e IE9, pero no funciona en IE8 o IE7. Cuando paso el mouse sobre el div, visualmente nada cambia. Traté de cambiar el onmouseover para ser

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

y el cuadro de alerta muestra una altura correcta de 55px, sin embargo, visualmente en la pantalla no cambia nada y el div aún se muestra como una altura de 25px.

He intentado todo lo posible, con exactamente los mismos resultados. Parece que IE está cambiando la altura del div en el dom pero no está redibujando el div en la pantalla para que coincida con su nueva altura.

En esta etapa, estoy totalmente perdido. Cualquier ayuda es muy apreciada.

Editar

Gracias a todos los que respondieron. Después de muchas sacudidas de cabeza contra la pared (pantalla de la computadora en este caso), el problema se debió a la interferencia de curvycorners - una biblioteca de JavaScript para imitar esquinas redondeadas (radio de borde) en versiones anteriores de IE. Una vez que hiciera su trabajo, evitaría activamente los rediseños de los elementos afectados.

Después de quitar las esquinas redondeadas, todo funciona bien, aunque se ve peor, pero al menos funciona. Investigaré otras opciones para esquinas redondeadas.

Answer 1

Gracias a todos los que respondieron. Después de muchas sacudidas de cabeza contra la pared (pantalla de la computadora en este caso), el problema se debió a la interferencia de curvycorners - una biblioteca de JavaScript para imitar esquinas redondeadas (radio de borde) en versiones anteriores de IE. Una vez que hiciera su trabajo, evitaría activamente los rediseños de los elementos afectados.

Después de quitar las esquinas redondeadas, todo funciona bien, aunque se ve peor, pero al menos funciona. Investigaré otras opciones para esquinas redondeadas.

Answer 2

Has tratado de hacer

$(this).height(55)

en lugar de

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

Answer 3

Me inclinaría por un enfoque más basado en CSS. Esto saca su presentación en CSS a donde pertenece.

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

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

Js

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

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

Answer 4

Usa este simple jQuery:

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

Answer 5

en realidad está funcionando

http://jsbin.com/ebejew