1. Verschiedene Interpretationen von Box-Interpretern #box{
width:600px; //für ie6.0-
width:500px; //für ff+ie6.0
}
#Kasten{
width:600px!important //für ff
width:600px; //für ff+ie6.0
width :500px; //für ie6.0-
}
2. Um CSS im IE auszublenden, verwenden Sie den Unterselektor
html>body #box{ }
3, nur vom IE erkannt
*html #box{ }
4. Gültig in ie/win, aber ausgeblendet in ie/max, verwenden Sie einen Backslash
5. Definieren Sie den Stil separat für z. B
6. Doppelte Distanz, die durch Schweben erzeugt wird, d. h
#Kasten{
float:left;
Breite: 100 Pixel;
margin:0 0 0 100px; //In diesem Fall generiert IE einen Abstand von 200px
display:inline; //Floats ignorieren
}
Lassen Sie uns hier ausführlich über die beiden Elemente Block und Inline sprechen. Die Eigenschaften des Blockelements sind: Es beginnt immer in einer neuen Zeile und die Höhe, Breite, Zeilenhöhe und Ränder können alle gesteuert werden (Blockelemente). Die Eigenschaften des Inline-Elements sind: und Andere Elemente befinden sich in derselben Zeile, ... können nicht gesteuert werden (Inline-Elemente);
#Kasten{
display:block; //Kann Inline-Elemente als Blockelemente simulieren
display:inline; //Erzielen Sie den Effekt der Anordnung in derselben Zeile
diplay:table; //für ff den Effekt von table simulieren
}
7, nur für Oprea
@media alle und (min-width:0px){
#Kasten{ }
}
8. Probleme mit IE und Breite und Höhe
IE erkennt die Definition von min- nicht, behandelt aber tatsächlich die normale Breite und Höhe so, als ob es ein Minimum gäbe. Dies wird ein großes Problem sein, wenn Sie nur Breite und Höhe verwenden.
Diese beiden Werte ändern sich in normalen Browsern nicht. Wenn Sie nur min-width und min-height verwenden, bedeutet dies, dass Breite und Höhe im IE überhaupt nicht festgelegt sind.
Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun:
#box{
Breite: 80px;
Höhe: 35px;
}
html>body #box{
Breite: automatisch;
Höhe: automatisch;
Mindestbreite: 80 Pixel;
Mindesthöhe: 35 Pixel;
}
9. Die Mindestbreite der Seite,
min-width, ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite des Elements eine bestimmte Breite nicht unterschreiten darf, um sicherzustellen, dass der Schriftsatz immer korrekt ist. Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Um diesen Befehl auch im IE verfügbar zu machen, können Sie ihn unter dem <body>-Tag einfügen und dann eine Klasse für das div angeben. Das CSS ist wie folgt gestaltet:
#container{
Mindestbreite: 600 Pixel;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
Die erste Mindestbreite ist normal; die Breite in der zweiten Zeile verwendet jedoch Javascript, das nur vom IE erkannt wird, wodurch Ihr HTML-Dokument ebenfalls weniger formal wird. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.
Die gleiche Methode kann auch verwendet werden, um die maximale Breite für IE zu erreichen:
#Container
{
Mindestbreite: 600 Pixel;
maximale Breite: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto";
}
10, klarer Schwimmer
.hackbox{
display:table; //Zeigt das Objekt als Tabelle auf Blockelementebene an
}
oder
.hackbox{
klar:beide;
}
Oder fügen Sie Folgendes hinzu: after (Pseudoobjekt), um den Inhalt festzulegen, der nach dem Objekt auftritt. Es wird normalerweise in Verbindung mit Inhalten verwendet. IE unterstützt dieses Pseudoobjekt nicht und wird von IE-Browsern nicht unterstützt, sodass es keine Auswirkungen auf IE/ hat. WIN-Browser. -------Das ist am problematischsten...
#box:after{
Inhalt: ".";
Anzeige: Block;
Höhe: 0;
klar: beides;
Sichtbarkeit: verborgen;
}
11. DIV-Floating-IE-Text erzeugt einen 3-Pixel-Fehler
Das Objekt auf der linken Seite wird verschoben und das rechte wird mithilfe des linken Rands des äußeren Patches positioniert. Der Text innerhalb des Objekts auf der rechten Seite wird 3 Pixel vom linken entfernt.
#Kasten{
float:left;
Breite:800px;
}
#links{
float:left;
Breite: 50 %;
}
#Rechts{
Breite: 50 %;
}
*html #left{
margin-right:-3px; //Dieser Satz ist der Schlüssel
}
HTML-Code
12. Attributauswahl (dies kann nicht als kompatibel angesehen werden, es ist ein Fehler beim Ausblenden von CSS)
p[id]{}
div[id]{}
ist für Versionen unter IE6.0 und IE6.0 ausgeblendet.
Es gibt immer noch einen Unterschied zwischen Attributselektoren und Unterselektoren, die von FF und OPera verwendet werden Der Umfang des Geräts ist relativ groß. In p[id] haben beispielsweise alle p-Tags mit der ID den gleichen Stil.