Extrem seltsames Verhalten mit div Höhenänderung in IE7 und IE8

Question

Ich habe einen sehr einfachen HTML/JS-Code, der die Größe eines div bei Maus über erweitert und bei Mouse-Out wieder einbricht. Der Code sieht wie folgt aus:

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

Dann habe ich meine div in HTML haben:

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

Das in Firefox perfekt funktioniert gut (ab Version 3 und höher), Safari, Chrome, Opera und IE9 - funktioniert aber nicht auf IE8 oder IE7. Wenn ich mit der Maus über das div gehe, ändert sich optisch nichts. Ich versuchte, die onmouseover Wechsel

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

und das Warnfeld zeigt korrekte Höhe von 55 Pixel zu sein, aber visuell auf dem Bildschirm ändert sich nichts und das div wird immer noch als 25px Höhe gezeigt.

Ich habe alles Mögliche ausprobiert - mit genau den gleichen Ergebnissen. Es sieht so aus, als ob IE die Höhe des div im dom ändert, aber das div auf dem Bildschirm nicht neu zeichnet, um seine neue Höhe zu erreichen.

In diesem Stadium bin ich total verloren. Jede Hilfe wird sehr geschätzt.

bearbeiten

Vielen Dank an alle, die geantwortet haben. Nach viel Kopfschütteln gegen die Wand (in diesem Fall Computerbildschirm), stellte sich heraus, dass das Problem durch Interferenzen von curvycorners verursacht wurde - einer JavaScript-Bibliothek, die abgerundete Ecken (Grenzradius) in älteren Versionen von IE nachahmt. Sobald es seine Arbeit getan hat, würde es aktiv Neuzeichnungen der betroffenen Elemente verhindern.

Nach dem Entfernen von abgerundeten Ecken funktioniert alles gut, obwohl es schlimmer aussieht - aber es funktioniert zumindest. Ich werde andere Optionen für abgerundete Ecken untersuchen.

Answer 1

Vielen Dank an alle, die geantwortet haben. Nach viel Kopfschütteln gegen die Wand (in diesem Fall Computerbildschirm), stellte sich heraus, dass das Problem durch Interferenzen von curvycorners verursacht wurde - einer JavaScript-Bibliothek, die abgerundete Ecken (Grenzradius) in älteren Versionen von IE nachahmt. Sobald es seine Arbeit getan hat, würde es aktiv Neuzeichnungen der betroffenen Elemente verhindern.

Nach dem Entfernen von abgerundeten Ecken funktioniert alles gut, obwohl es schlimmer aussieht - aber es funktioniert zumindest. Ich werde andere Optionen für abgerundete Ecken untersuchen.

Answer 2

Haben Sie

$(this).height(55) 

statt

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

Answer 3

es tatsächlich arbeiten

http://jsbin.com/ebejew

Answer 4

Verwenden Sie dieses einfache jQuery zu tun versucht:

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

Answer 5

Ich würde eher für einen CSS-orientierten Ansatz gehen. Dadurch wird Ihre Präsentation in CSS extrahiert, wo sie hingehört.

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

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

Js

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

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