Dieser Artikel fasst die Kompatibilitätsprobleme zwischen CSS und JavaScript in einer Vielzahl von Beispielen zusammen. Teilen Sie es für Ihre Referenz. Die spezifische Zusammenfassung lautet wie folgt:
1. Kompatibilität im CSS -Stil
1. Float Clearing Float
Webseiten sind auf einigen Browsern falsch ausgerichtet, oft weil Float verwendet und nicht wirklich geschlossen wird, was auch ein Grund ist, warum sich die DIV nicht an die Höhe anpassen kann. Wenn die Eltern Div nicht float setzt, aber sein Kinderd Div float, kann die Eltern Div die gesamte Kinderdiv nicht abdecken. Diese Situation tritt im Allgemeinen auf, wenn ein übergeordnetes DIV mehrere untergeordnete Divs enthält. Lösung:
1) Float für den übergeordneten Div einstellen
2) Fügen Sie ein leeres DIV nach allen Untersagen hinzu (dies ist das, was ext derzeit tut), zum Beispiel:
.parent{width:100px;}.son1{float:left;width:20px;}.son2{float:left;width:80px;}.clear{clear: both;margin:0;parding0;height:0px;font-size:0px;}<div> <div></div> <div></div> <div></div>3) Universal Float geschlossen
Fügen Sie dem globalen CSS den folgenden Code hinzu und fügen Sie der DIV Class = "ClearFix" hinzu, die geschlossen werden muss, was bewährt wurde.
<Styles>/* Clear Fix*/. ClearFix: After {Inhalt: "."; Anzeige: Block; Höhe: 0; Clear: Beide; Sichtbarkeit: versteckt;}. ClearFix {Anzeige: Inline-Block;}/* aus dem MAC /*/.clearfix {display: block;}/* end aus dem MAC-Ende von IE Mac* //* ende von* //* //* ende von* //* //* //* ende von* //* //* //* //* ende von*///* //* ende von*///*////* // ende von*///* //*///* ende von* //*//</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</<:: Nach (Pseudo -Objekt) legt der Inhalt fest, der nach dem Objekt auftritt und normalerweise in Verbindung mit dem Inhalt verwendet. IE unterstützt dieses Pseudo -Objekt nicht und wird nicht vom IE -Browser unterstützt, sodass es den IE/Win -Browser nicht beeinflusst. Dies ist am problematischsten.
4) Überlauf: Auto
Fügen Sie einfach Überlauf hinzu: automatisch zu den CSS der übergeordneten Div. Zum Beispiel:
.Parent {width: 100px; Überlauf: auto} .son1 {float: links; width: 20px;}. Son2 {float: links; width: 80px;} <div> </div> </div> </div> </div>Das Prinzip ist, dass der Grund, warum periphere Elemente nicht gut erweitert werden können, im Überlauf liegt, da der Überlauf unsichtbar ist (siehe Erklärung von W3C). Fügen Sie jetzt einfach einen "Überlauf: automatisch" zum peripheren Element hinzu, und das Ergebnis ist, dass es bis auf den IE wirklich gelöst werden kann. Als nächstes müssen wir das IE -Problem lösen. Das Hinzufügen von "_Height: 1%" löst dieses Problem vollständig. Ich habe es versucht, aber es ist in Ordnung, "_Height: 1%" unter IE hinzuzufügen, also behalte es.
2. Lexikon schneiden
.hh {-o-text-overflow: ellipsis; text-overflow: ellipsis; weißer Raum: nowrap; Überlauf: versteckt;}Dies bedeutet, dass der zusätzliche Text nach dem Überschreiten der Länge von selbst abgeschnitten und mit einer Ellipse endet. Technologie ist eine gute Technologie, und viele Menschen nutzen sie gerne zufällig, aber beachten Sie, dass Firefox sie nicht unterstützt.
<meta http-äquiv = "x-ua-kompatible" content = "ie = 7" />
Wenn Sie diesen Satz zur Seite hinzufügen, können Sie die Seite mit IE7 kompatibel machen
Als Referenz! Ich möchte Sie an ein schwimmendes Problem erinnern. Achten Sie darauf, die Div -Breite und -größe festzulegen. Achten Sie darauf, den Überlauf zu setzen: versteckt; Achten Sie darauf, das Display zu schließen: Inline-Block für Firefox-Eltern-Div-Stile;
3. Cursor: Hand und Cursor: Zeiger
Firefox unterstützt keine Hand, aber der IE unterstützt Zeiger
Lösung: Verwenden Sie den Zeiger gleichmäßig
4. CSS transparent
Mehrere Browser unterstützen die Transparenz auf unterschiedliche Weise. Um sicherzustellen, dass der Transparenzeffekt normalerweise in Mainstream -Browsern wie IE, Firefox, Chrom, Safari usw. angezeigt werden kann, können wir eine Transparenzklasse definieren, da Sie 3 Elemente schreiben müssen, sobald Sie sie schreiben, und speichern Sie sie jedes Mal.
Der spezifische Code lautet wie folgt:
.Transparent {filter: alpha (opacity = 60); /*Unterstützung IE Browser*/-Moz-Opacity: 0,6; /*Unterstützen Sie den Firefox -Browser*/Opazität: 0,6; /*Unterstützen Sie Chrome, Opera, Safari und andere Browser*/}5. Width und Polsterung in CSS
In IE7 und FF beinhaltet die Breite keine Polsterung, sondern in IE6.
2. Kompatibilität JavaScript
1. Kinder und Kindernoten
Es gibt einen Unterschied in Verhaltensweisen von Kindern, Kindern und Kindern unter Firefox, die durch IE bereitgestellt werden. Kindernoten unter Firefox zählen sowohl Linienbrüche als auch Whitespace -Charaktere als Kinder der Elternknoten, während Kindernoten und Kinder von IE nicht tun. Zum Beispiel:
<div id = "dd">
<div> yizhu2000 </div>
</div>
Ein Div mit ID DD wird mit Childnodes unter IE betrachtet. Die Anzahl der Kinder beträgt 1 und drei unter FF. Wir können vom DOM -Betrachter von Firefox sehen, dass seine Kinder ["/n", div, "/n"] sind.
Um die Eigenschaften von Kindern unter Firefox zu simulieren, können wir dies tun:
if (typeof (htmlelement)! 1) {a [j ++] = n;2. Firefox und dh Ereignisse
Window.event kann nur in IE, nicht in Firefox verwendet werden, da das Firefox -Ereignis nur in der Szene verwendet werden kann, in der das Ereignis auftritt. Firefox muss Ereignis aus der Quelle für das Passieren von Parametern hinzufügen. IE ignoriert diesen Parameter und verwendet window.event, um das Ereignis zu lesen.
Zum Beispiel die folgende Methode, um die Mausposition unter IE zu erhalten:
<button onclick = "onclick ()"> Die horizontale Koordinate der Mausklick -Klick </button> <script type = "text/javaScript"> Funktion onclick () {alert (Ereignis.ClientX);} </script>Müssen auf geändert werden auf
<button onclick = "Onclick (Ereignis)"> Get oterHtml </button> <skript type = "text/javaScript"> Funktion Onclick (Ereignis) {Ereignis = Ereignis || window.event; alert (Event.clientX);} </script>Verwenden Sie es nur in beiden Browsern
A. HTML -Objektakquisitionsproblem
Firefox Get Method Document.GetElementById ("IDName")
IE verwendet document.idname oder document.getElementById ("idName")
Lösung: Verwenden Sie document.getElementById ("idName");
V
In Firefox können Sie das CONT -Schlüsselwort oder das VAR -Schlüsselwort verwenden, um Konstanten zu definieren.
In IE können Sie das VAR -Schlüsselwort nur verwenden, um Konstanten zu definieren.
Lösung: Verwenden Sie das VAR -Schlüsselwort, um Konstanten zu definieren.
5.Rame Problem
Der folgende Rahmen ist ein Beispiel:
<Frame Src = "xxx.html" id = "FrameID" name = "Framenname" />
a) Zugriffs -Frame -Objekt
IE: Verwenden Sie window.frameid oder window.framename, um auf dieses Frame -Objekt zuzugreifen.
Firefox: Nur Fenster.Framenname kann verwendet werden, um auf dieses Frame -Objekt zuzugreifen.
Außerdem können Sie sowohl in IE als auch in Firefox Window.Document.GetElementById ("FrameID") verwenden, um auf dieses Frame -Objekt zuzugreifen.
b) Rahmeninhalt wechseln
Sowohl in IE als auch in Firefox können Sie window.document.getElementById ("testFrame").
Wenn Sie die Parameter im Rahmen zurück an das übergeordnete Fenster übergeben müssen (beachten Sie, dass es sich nicht um einen Opener, sondern ein Elternteil handelt), können Sie übergeordnete übergeordnete im Rahmen auf das übergeordnete Fenster zugreifen. Zum Beispiel:
parent.document.form1.filename.value = "aqing";
6. Körperproblem
Firefox 'Körper existiert, bevor der Körpermarke vom Browser vollständig eingelesen wird. Während IEs Körper existieren muss, nachdem der Körpermarke vom Browser vollständig eingelesen wurde;
7. Der Unterschied zwischen Firefox und IE übergeordnetem Element (Parentselement)
Dh: obj.parentelement
Firefox: Obj.Parentnode
Lösung: Weil sowohl Firefox als auch IE DOM unterstützen, verwenden alle obj.parentnode
8. Problemintertextproblem
InnerText funktioniert normalerweise im IE, aber InnerText funktioniert nicht in Firefox, TextContent ist erforderlich.
Lösung:
if (navigator.appname.indexof ("explorer")> -1) {document.getElementById ('Element'). Innertext = "Mein Text";} else {document.getElementById ('Element'). textContent = "My Text";}9. Der Unterschied zwischen Ajax bekommt XMLHTTP
var xmlhttp; if (window.xmlhttprequest) {xmlhttp = new xmlhttprequest ();} elseif (Active.activeXObject) {// IE Erfassungsmethode xmlhttp = new ActiveXObject ("microsoft.xmlhttp");};};Hinweis: In IE kann der Inhalt der XMLHTTP.Send (Inhalt) -Methode leer sein, während Firefox nicht null sein kann. Send ("") sollte verwendet werden, andernfalls tritt ein 411 -Fehler auf.
Ich hoffe, dieser Artikel wird für die Webprogrammierung aller hilfreich sein.