Wann berechnet IE7 Stile neu? Funktioniert nicht zuverlässig, wenn eine Klasse zum Körper hinzugefügt wird

Ich habe ein interessantes Problem hier. Ich verwende eine Klasse für das Element als einen Schalter, um ein ziemlich großes Layoutverhalten auf meiner Site zu erzielen.Wann berechnet IE7 Stile neu? Funktioniert nicht zuverlässig, wenn eine Klasse zum Körper hinzugefügt wird

Wenn die Klasse angewendet wird, passieren bestimmte Dinge, und wenn die Klasse nicht angewendet wird, passieren sie nicht. Javascript wird verwendet, um die Klasse anzuwenden und zu entfernen. Der entsprechende CSS ist in etwa wie folgt aus:

.rightSide { display:none; } 
.showCommentsRight .rightSide { display:block; width:50%; } 
.showCommentsRight .leftSide { display:block; width:50%; }

Und der HTML:

<body class="showCommentsRight"> 
    <div class="container"></div> 
     <div class="leftSide"></div> 
     <div class="rightSide"></div> 
    </div> 
    <div class="container"></div> 
     <div class="leftSide"></div> 
     <div class="rightSide"></div> 
    </div> 
    <div class="container"></div> 
     <div class="leftSide"></div> 
     <div class="rightSide"></div> 
    </div> 
</body>

ich vereinfacht die Dinge haben, aber dies ist im Wesentlichen das Verfahren. Die gesamte Seite ändert das Layout (die rechte Seite wird in drei verschiedenen Bereichen ausgeblendet), wenn die Flagge auf den Körper gesetzt wird. Dies funktioniert in Firefox und IE8. Es funktioniert nicht im IE8 im Kompatibilitätsmodus. Was faszinierend ist, ist, dass wenn Sie dort sitzen und die Seite aktualisieren, die Ergebnisse variieren können. Es wird die rechte Seite eines anderen Abschnitts angezeigt. Manchmal wird nur die rechte Seite des oberen Bereichs angezeigt, manchmal wird auch die Mitte angezeigt.

Ich habe versucht:
- ein Validator (suchen malformed html)
- doppelt meine CSS-Formatierung überprüft und ...
- dafür, dass Blatt meiner IE7 Hack wurde eine Wirkung nicht haben.
- setzt die Flagge Klasse auf einem anderen, nicht-Körperhüllenelement (noch hat das gleiche seltsame Verhalten)

Also meine Frage ist:
- Gibt es eine Möglichkeit, dass dieses Verhalten zuverlässiger gemacht werden kann?
- Wann entscheidet sich IE7 für das Re-Styling?

Danke an alle.

Quelle

2010-03-16 SimplGy

Das klingt wirklich interessant. Es gibt keine Möglichkeit, dies auf eine Live-Site zu setzen, um sie zufällig zu betrachten und zu bestätigen. Haben Sie darüber nachgedacht, die Entwicklersymbolleiste für IE7 zu installieren, um genau zu sehen, wo es schief geht? http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en –

Ich habe die Dev-Toolbar installiert, sagt mir, dass die .rightSide-Elemente immer noch anzeigen: keine Anwendung, selbst wenn dieses Element angezeigt wird. Die Ungenauigkeit dort war jedoch keine große Überraschung, ich habe festgestellt, dass die Symbolleiste ziemlich häufig mit dynamischem Code nicht synchron ist. – SimplGy

Es gibt keine Möglichkeit, es auf eine Live-Site zu stellen, sorry. Ich fand diesen möglicherweise verwandten Beitrag: http://www.codingforums.com/archive/index.php/t-99370.html – SimplGy

Klingt ein bisschen wie ein Problem, das ich mit IE7 hatte, wo das DOM aktualisiert wird, aber die Pixel auf dem Bildschirm nicht (manchmal Mauszeiger über es löst Neuzeichnen). Ich fand einen schmutzigen Hack, der in meinem Fall (spesudo-javascript) gearbeitet:

//Just after changing the css class: 
if(isIe7()){ 
    addAnEmptyDivAboveTheChangedElement(); 
    removeTheEmptyDivFromTheDom(); 
}

Aus irgendeinem Grund dieser brutale Hack das Hinzufügen und Entfernen eines Elements (es könnte sogar funktionieren, wenn Sie es irgendwo hinzufügen und entfernen) verursacht IE7 um das Dokument neu zu streichen. Es kann jedoch ein Flimmern verursachen und es ist ein teurer Hack, da es ein komplettes Repaint in einem bereits langsamen Browser erzwingt, deshalb mache ich das nur, wenn ich sicher bin, dass es ie7 ist (um nicht jeden anderen Browser zu verlangsamen, nur weil ie7 dumm ist).

Kann nicht versprechen, dass es funktioniert, obwohl ... Als ich versuchte, eine Lösung für mein Problem zu finden, fand ich viele verschiedene Hacks, die nicht funktionierten. Die Inkonsistenzen von ie7 mit Javascript zu beheben, ist fast schon Versuch und Irrtum. :)

PS: Ich sehe Makel display allready vorgeschlagen wird, könnte es funktionieren, oder wie in meinem Fall, es kommt nicht. Ich musste tatsächlich das Element aus dem DOM-Baum entfernen, damit es funktioniert ..

Quelle

2010-03-18 08:35:48

Dies ist direkt auf der Schaltfläche. Ich endete mit: if ($ .browser.class == "msie7") { _ $ dingToRefresh.addClass ("kickIE"). RemoveClass ("kickIE"); } Wenn es eine weniger ressourcenintensive Möglichkeit gäbe, würde ich es verwenden, aber ich habe nichts gefunden. – SimplGy

Try this:

.showCommentsRight .rightSide { display:block !important; width:50%; } 
.showCommentsRight .leftSide { display:block !important; width:50%; }

Quelle

2010-03-16 22:27:16 Shuriken

IE versteht nicht '! Wichtig'. –

IE7 und höher sollten es verstehen. Da das Problem hier mit IE7 ist, ist es einen Versuch wert. – keithjgrant

Funktioniert nicht. Ich bin irgendwie froh, weil ich in meinem Code keine Wichtiges hinterlassen wollte. Wie ich in der Bearbeitung sagte, funktioniert das alles gut, wenn die Klasse auf ein Umhüllungselement von Hand, vor der Zeit, statt JS angewendet wird - so ist die Vererbung in Ordnung. – SimplGy

Nähe einer Lösung hier, vielleicht jemand anderes kann es das letzte Stück des Weges bringen.

Die Seite verhält sich wie erwartet, wenn:
- Wenn der Stil dem Körper von Hand statt Javascript zugewiesen wird.
(keine akzeptable Lösung, aber erwähnenswert)
- Wenn die Elemente, die IE7 nicht aktualisiert (die .RightSide) sind manuell kicken mit etwas wie $ (". RightSide"). Hide(). Show();

Diese zweite Lösung ist verdammt nah an praktikabel, außer dass ich eigentlich nach Ausblenden Verhalten aus meiner Flagge suche, also würde ich eine weniger aufdringliche Sache ändern wollen, die den IE die Stile aktualisieren lässt.

Quelle

2010-03-17 14:13:31 SimplGy

Es scheint, wie Sie entweder in einem IE6/IE7 Reflow laufen/repaint Ausgabe oder IE6/IE7 Layout Problem.

Siehe http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ für eine detaillierte und informative Analyse, was löst Reflow, Repaint, etc. Siehe auch http://www.satzansatz.de/cssd/onhavinglayout.html um herauszufinden, was ein Element in IE "Layout haben" verursacht.

Sie können sowohl "mit Layout" als auch einen Reflow auslösen, indem Sie height: 1%; setzen. Dies ist bekannt als die Holly hack, benannt nach der ersten Person, um es zu dokumentieren, Holly Bergevin.

Quelle

2010-03-18 21:35:59

Hier sind meine zwei Cent. Ein Problem mit Expando-Objekt trat auf, so dass das Folgende für mich mit einer Einstellungsverzögerung funktionierte. Mein Problem war das Hintergrundbild wurde nicht angezeigt, wenn ich etwas HTML einfügte.

app.viewModel.modules.updateSpeech = function (element) { 
     if ($('html').hasClass('IE7')) { 
      var cssClass = $(element).attr('class') || element['class']; 
      if (cssClass) 
       setTimeout(function() { $(element).removeClass(cssClass).addClass(cssClass); }, 0); 
     } 
    };

Quelle

2011-11-09 17:48:41

Wann berechnet IE7 Stile neu? Funktioniert nicht zuverlässig, wenn eine Klasse zum Körper hinzugefügt wird

Antwort

Verwandte Themen