CSS IE8 - bremst sich selbst aus! Prozessor auf 80%

Belee

Lt. Commander
Registriert
Dez. 2006
Beiträge
1.518
Hallo

Weiß ja nicht ob es schon bekannt ist aber der IE8 hat große Probleme mit einer horizontalen Navigation wenn sie mit <li> display: inline gemacht ist. Und dabei
das a und a:hover für das hovern verwendet wird UND wenn man negative margins
verwendet um den Whitespace zu eliminieren.

Ich hänge jetzt schon fast 1 Woche dran um den Bug irgendwie zu umgehen jedoch ohne Chance. Alle Browser inkl. IE7 habe keine Probleme sondern nur und ausschliesslich der IE8.

Wie sich das bemerkbar macht...

Wenn man mit der Maus durch die Navipunkte hin und her fährt, dann stockt jede JavaScript Ausgabe im IE8, jede Gif-Animation bleibt stehen, Flash Ausgaben bleiben stehen und der Prozessor des Rechners "zumindest meiner" schießt auf bis zu 80%.

Ich habe diverse Tests gemacht, auch mit einer ganz einfachen Seite wo nur eine Hover-Navigation von A-Z vorhanden war, auch habe ich diverse angebliche CSS-Hacks versucht doch der IE8 schwitzt trotzdem.
Alle mit bekannten Möglichkeiten habe ich versucht doch keine Chance ausser man macht die Navigation mit float, damit hat der IE8 keine Probleme.

Kurzfristige Abhilfe schafft nur die <li> Klasse für den IE8 mit inline-block zu überschreiben, damit fühlt sich der IE8 eine Zeit wohl doch schon nach ein paar Minuten das selbe Problem, ist also nur eine kurzfristige Besserung. Keine Probleme gibt es dagegen wenn man die negativen margings weglässt, also scheint mir dass das der Auslöser ist. Doch ohne negativen margings gibt es Whitespaces zwischen den Punkten die man nicht immer gebrauchen kann, auch das <!-- --> vor und nach <li> bringt den IE8 ins schwitzen, auch ein Freizeichen vor </a> hilft nicht. Diese Sachen funktionieren zwar nur dann gibt es aber unter z.B. in FF das Problem dass das letzte <li> das ausdokumentieren des Whitespaces ignoriert und man extra noch ein geschütztes Leerzeichen einfügen muss was dann aber wieder der Opera und IE7 nicht mag.

Hier ein Test auf meiner Seite, einfach mal mit der Maus von A-Z hin und her fahren und dann genau das Flasch und die JavaScript Ausgabe beobachten, sowie auch das Hover der Navigation beobachten.
http://www.discoradioaction.eu/dbase#conmainNav

Ich habe mit 9 Browser diese Navi testen lassen und nur der IE8 hat die Probleme. Es ist wie gesagt nur CSS. Eventuell kennt jemand das Problem und weiß wie man dieses Problem umgehen kann aber trotdzem die Whitspaces zwishen den Punkten verschwinden lassen kann. Floaten möchte ich diese Navi nicht! das wäre Blödsinn.

Nett wäre wenn das jemand auch mal mit dem IE9 testen könnte, habe nur XP - nicht kompatible.

Belee

Hier der Übeltäter:
HTML:
#dbStart li { display: inline; margin-left: -1px; margin-right: -1px }
 
Zuletzt bearbeitet:
Ist zwar nicht die beste Lösung aber hast Du mal über <table><tr><td>A-Z</td></tr></table> nachgedacht?

Hover kannst Du da auch wunderbar Anwenden...
Ergebnis sieht ganz genau so aus, bisschen CSS und kein unterschied?


*edit*
Also bei dem IE8 hab ich 25% Auslastung, wieso dass so ist, kann ich auch nicht ganz nach vollziehen.

Vielleicht mal ein wenig mit CSS spielen und dann für den IE 8 ne eigene datei.css anlegen?
 
Zuletzt bearbeitet:
Ja über eine Tabelle habe ich auch schon nachdedacht. Werde die Navi für den IE8 dann wohl mit einer Tabelle und PHP realisieren.

Du kannst mir glauben das ich in den letzten 9 Tagen jetzt, alles schon ausprobiert habe. Mit einer eigenen css für den ie8, damit habe ich angefangen. Es ist ja nicht so das ich Laie bin, also ich kenne css recht gut und auch die diversen Browser Bugs aber diesen kannte ich bislang noch nicht. Ich habe alles möglich mit CSS versucht was es zu versuchen gab, wie ich schon schrieb, das einzige ist das negativ margin weglassen udn whitespaces im kauf nehmen dann gibt es keine Probleme.
 
Ohne das jetzt genau untersucht zu haben:

Du sagst du brauchst negative margins, weil du sonst abstände zwichen den li's bekommst.

Ich habe gesehen, dass im Quelltext zwischen dem schließenden </li> und dem nächsten <li> whitespace + zeilenumbruch sind. Da du "inline-block" verwendest denke ich, dass der IE diese Abstände dann wieder interepretiert und dadurch lücken entstehen lässt.

Versuch mal die li tags ohne zwischenraum zu schreiben also <li>A</li><li>B</li><li>C</li><li></li>, dann könnten die Lücken verschwinden, die notwendingkeit für negative margins entfallen und dein problem löst sich hoffentlich in luft auf.

Andererseits ist das Problem echt interessant...
 
Naja, ich weiß nicht ob das der Übersichtlichkeit gut tut wenn ich von A-Z <li></li> in einer einzigen Zeile schreibe denn die wird ja sehr lang.
Das Problem ist dann natürlich keins mehr das ist richtig, doch alles in einer Zeile ist nicht das was ich suche. Es muss eine Methode geben den IE8 hier zu überlisten, bin ja schon fleissig am suchen und testen.
Ergänzung ()

Hab den Test jetzt abgebrochen und die kurzfristige Besserungslösung am laufen, damit verzögert sich nicht die Navi sondern nur die JS und Flashausgabe. Lass ich erst einmal so bis ich eine andere Lösung gefunden habe, wenn nicht kommt da eine Tabelle hin.
 
Belee schrieb:
Naja, ich weiß nicht ob das der Übersichtlichkeit gut tut wenn ich von A-Z <li></li> in einer einzigen Zeile schreibe denn die wird ja sehr lang.
Das Problem ist dann natürlich keins mehr das ist richtig, doch alles in einer Zeile ist nicht das was ich suche. Es muss eine Methode geben den IE8 hier zu überlisten, bin ja schon fleissig am suchen und testen.

Wo wird es denn unübersichtlich, doch nur wenn du die Seiten statisch auslieferst - also ohne PHP oder Java. Dann könnte ich es verstehen. Ansonsten werden die Elemente doch ohnehin in einer Schleife angelegt, das wäre dann ja nicht unübersichtl.

Meines wissens gibt es leider keine saubere Lösung dem IE das mit den Abständen abzugewöhnen.
 
Nicht IE sondern IE8, der IE7 macht keine Probleme. :)
 
Notfalls lässt du den ie8 und ie9 in ie7 Kompatibilitäsmodus laufen.
 
Jo, das wäre wohl das einfachste.
 
Zurück
Oben