Häufige Situationen und entsprechende Methoden zum CSS-kompatiblen Debuggen

Autor：Eve Cole Aktualisierungszeit：2009-06-12 17:21:08

1. CSS-HACK

Die folgenden zwei Methoden können heute fast alle HACKs lösen.

1. !important

Mit der Unterstützung von !important durch IE7 ist die !important-Methode jetzt nur noch für IE6s HACK verfügbar (Achten Sie auf die Schreibweise. Denken Sie daran, dass die Deklarationsposition erforderlich ist muss im Voraus erfolgen.)

<style>

#wrapper

{

width: 100px!important;

width: 80px;

}

</style>

2. IE6/IE77 für FireFox

*+html und *html sind IE-spezifische Tags, die nicht unterstützt werden

von Firefox.

Und

html

ist ein eindeutiger Tag für

IE7

}

</style>

Hinweis:

*+html HACK für IE7 muss sicherstellen, dass die folgende Anweisung oben im HTML steht:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">

2. Universeller Float-Abschluss.

Informationen zum Prinzip des Clear Float finden Sie unter [So löschen Sie Floats ohne strukturelles Markup].

Fügen Sie den folgenden Code hinzu Globales CSS und fügen Sie class="clearfix" zum Div hinzu, das geschlossen werden muss. Es funktioniert jedes

Mal

.clearfix:after

{

content

".";

display

:block

height

:0;

clear

both

;

.clearfix {display:block;}

</style>

3. Weitere Kompatibilitätstipps

1. Das Festlegen der Auffüllung von div unter FF führt zu einer Vergrößerung der Breite und Höhe, IE jedoch nicht (kann mit !important gelöst werden)

). line- Die Höhe wird auf die gleiche Höhe wie das aktuelle Div eingestellt und dann vertikal ausgerichtet: Mitte (Achten Sie darauf, den Inhalt nicht

horizontal zu zentrieren.) 2). nicht allmächtig)

3. Wenn Sie Inhalte im a-Tag hinzufügen müssen Für den oberen Stil müssen Sie display: block; (häufig in Navigations-Tags) festlegen.

4. Der Unterschied im Verständnis von BOX zwischen FF und IE führt zu einem 2px Unterschiede und Probleme wie die Verdoppelung des Randes eines Divs unter IE

5. Der UL-Tag ist standardmäßig im Listenstil und im Folgenden aufgeführt, um unnötige Probleme zu vermeiden. (Üblicherweise in Navigations-Tags und Inhaltslisten)

6. Legen Sie die Höhe des Div nicht als externen Wrapper fest. Fügen Sie am besten einen Überlauf hinzu:

7. Über den Handcursor . Und Hand ist nur für IE 1 anwendbar.

Die meisten CSS-Stile für Firefox ie6 und ie7

werden jetzt mit !important gehackt,

aber ie7 kann !important korrekt interpretieren führt dazu, dass die Seite nicht wie gewünscht angezeigt wird! Ich habe einen guten Hack

für

IE7 mit „*+html“ gefunden

. Durchsuchen Sie ihn jetzt mit IE7 und es sollte kein Problem geben.

Schreiben Sie nun ein CSS wie dieses:

#1 { color: #333; }

* html #1 { color: #666 }

*+html #1 { color: #999 }

Dann wird die Schriftfarbe in Firefox als #333 angezeigt . Die Schriftfarbe ist #666 unter IE6 und #999 unter IE7.

Die Hauptstildefinition für

Zentrierungsprobleme im CSS-Layout

lautet wie folgt:

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; auto }

Beschreibung:

Definieren Sie zuerst TEXT-ALIGN auf dem übergeordneten Element element: center; Dies bedeutet, dass der Inhalt innerhalb des übergeordneten Elements zentriert ist;

Aber es kann nicht in Mozilla zentriert werden. Die Lösung besteht darin, beim Festlegen des untergeordneten Elements „MARGIN-RIGHT: auto; MARGIN-LEFT: auto;“ hinzuzufügen.

Es ist zu beachten, dass empfohlen wird, diese Methode nicht festzulegen, um die gesamte Seite zu zentrieren in einem DIV können Sie mehrere Divs nacheinander aufteilen.

Definieren Sie einfach MARGIN-RIGHT: auto;MARGIN-LEFT: auto in jedem geteilten Div.

3 Verschiedene Interpretationen des Boxmodells

#box{ width:600px; //für ie6.0- width:500px; //für ff+ie6.0}

#box{ width:600px!important //für ff width: 600px; //für ff+ie6.0 width :500px; //für ie6.0-}

4 Doppelte Distanz erzeugt durch Floating ie

#box{ width:100px; Art Unter diesen Umständen generiert der IE einen Abstand von 200 Pixeln. display:inline; //Float ignorieren} Lassen Sie uns

im Detail über die beiden Elemente Block und Inline sprechen: Beginnen Sie immer in einer neuen Zeile, Höhe

, Breite, Zeilenhöhe, die Ränder

können

gesteuert werden (Blockelemente); die Eigenschaften von Inline-Elementen sind: auf derselben Zeile wie andere Elemente, ... können nicht gesteuert werden (Inline-Elemente);

/kann Inline-Elemente sein. Als Blockelement simulieren. display:inline; //Erzielen Sie den Effekt der Anordnung in derselben Zeile. diplay:table;

IE erkennt die Definition von min- nicht, behandelt aber tatsächlich normale Breite und Höhe es gibt min. Dies ist ein großes Problem. Wenn Sie nur Breite und Höhe verwenden,

ändern sich diese beiden Werte in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Höhe verwenden, werden Breite und Höhe überhaupt nicht festgelegt unter IE.

Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 35px;}

6 „Mindestbreite der Seiten“

ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite eines Elements eine bestimmte Breite nicht unterschreiten darf, um sicherzustellen, dass das Layout immer korrekt ist. Der IE erkennt dies jedoch nicht

und behandelt die Breite tatsächlich als Mindestbreite. Damit dieser Befehl im IE funktioniert, können Sie ein <div> unter dem <body>-Tag einfügen und dann eine Klasse für das div angeben:

Dann entwerfen Sie das CSS wie folgt:

#container{ min-width: 600px; width :expression (document.body.clientWidth < 600? "600px": "auto" );}

Die erste Mindestbreite ist normal; aber die Breite in Zeile 2 verwendet Javascript, das nur vom IE erkannt wird, was Sie auch macht Das HTML-Dokument ist nicht sehr formal. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.
Es kann auch direkt geschrieben werden als:
#container{ min-width:600px; *width:600px;}
Auf diese Weise beträgt die Mindestbreite 600PX, unabhängig von IE oder FF.

7 Löschen Sie die schwebende

Datei .hackbox{ display:table; //Anzeige des Objekts als Tabelle auf Blockelementebene} oder .hackbox{ clear:both;}

oder fügen Sie sie hinzu : after (Pseudoobjekt), legt den Inhalt fest, der nach dem Objekt auftritt. 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/WIN-Browser hat. Das Schwierigste daran... #box:after{ content: "."; display: block height: 0; clear: bide;

IE-Text erzeugt 3 Pixel

Das Objekt auf der linken Seite Die Seite

des Bugs

ist schwebend und die rechte Seite wird mithilfe des linken Rands des äußeren Patches positioniert. Der Text im rechten Objekt ist 3 Pixel von der linken Seite entfernt

. left{ float:left; width:50 %;}#right{ width:50%;}*html #left{ margin-right:-3px //Dieser Satz ist der Schlüssel}

HTML-Code<div id="box" > <div id="left">< /div> <div id="right"></div></div>

9 Attributselektor (dies kann nicht als kompatibel angesehen werden, es ist ein Fehler beim Ausblenden von CSS)

p[id ]{}div[id]{}

Dies gilt für IE6.0 und Versionen unter IE6.0 sind ausgeblendet.

Es gibt immer noch einen Unterschied zwischen Attributselektoren und Unterselektoren in FF und OPera Form, während der Umfang der Attributselektoren relativ groß ist, wie z. B. p In [id] haben alle p-Tags mit IDs den gleichen Stil.

10 IE-Versteckproblem

Wenn die div-Anwendung komplex ist, gibt es einige Links in jeder Spalte, z. B. DIV. Zu diesem Zeitpunkt tritt leicht das Versteckproblem auf.

Einige Inhalte können nicht angezeigt werden. Wenn die Maus diesen Bereich auswählt, wird festgestellt, dass sich der Inhalt tatsächlich auf der Seite befindet.

Lösung: Verwenden Sie das Attribut „line-height“ für #layout oder verwenden Sie eine feste Höhe und Breite für #layout. Halten Sie die Seitenstruktur so einfach wie möglich.

11 Nichtanpassung der Höhe

Nichtanpassung der Höhe bedeutet, dass die Höhe der äußeren Schicht nicht automatisch angepasst werden kann, wenn sich die Höhe des Objekts der inneren Schicht ändert, insbesondere wenn das Objekt der inneren Schicht

Rand oder Paddign verwendet.

Beispiel:

<p>Inhalt im p-Objekt</p>

</div>

CSS: #box {background-color:#eee }

#box p {margin-top: 20px;margin - unten: 20px; text-align:center; }

Lösung: Fügen Sie 2 leere div-Objekte über und unter dem P-Objekt hinzu: .1{height:0px;overflow:hidden;} oder fügen Sie das border-Attribut zum DIV hinzu.

Die folgende Methode ist eine Analysemethode aus einem anderen Blickwinkel:
Methoden zur Behandlung von Browserfehlern (teilweise) für Freunde, die Webdesign mögen, zum Teilen zusammengestellt:
1. Sternchen*
IE kann * erkennen, Standardbrowser wie FF können * jedoch nicht erkennen.
Beispiel: p { Farbe:Gelb; *Farbe:Rot;}
Ähnliche gibt es
+ Pluszeichen
Nur IE erklärt
p{Farbe:rot; +Farbe:blau}
IE zeigt blau an und FF zeigt rot an
2.!wichtig
IE6 und niedriger ignorieren diesen Stil, IE7 FF unterstützt ihn;
p{Farbe:rot !important;Farbe:gelb;}
IE7 FF zeigt Rot, IE6 Gelb
Beachten Sie hier, dass die !important-Methode von IE6 und darunter nur ignoriert wird, nachdem das obige Format befolgt wurde. Andere Methoden zur Erhöhung der Stilgewichtung können universell verwendet werden.
3. Unterstreichen.
IE6 und niedrigere Versionen verwenden diesen Stil, andere werden ignoriert.
p{color:red; _color:blue}
4. Hinweise:
p{color:red};
Dieser Stil kann in IE6 angewendet und angezeigt werden, wird jedoch in IE5 und niedrigeren Versionen nicht verarbeitet, sodass er für IE5/6 unterschieden werden kann
5. @IMPORT:
Verwenden Sie URL in @IMPORT, um Stile zu importieren. Die Standardverwendung besteht darin, den Wert wie folgt in Anführungszeichen zu setzen: @IMPORT URL("newstyle.css"); diese Verwendung kann daher von den Browsern IE5 und höher und FF unterstützt werden erreichen Die Stile von IE4 werden separat verarbeitet.
Darüber hinaus gibt es noch eine weitere Methode:
@IMPORT URL("noie.css")-Bildschirm;
„Screen“ ist eine Option zur Angabe des Gerätetyps, „screen“ wird für die Bildschirmanzeige und „print“ für die Druckgeräteanzeige verwendet. IE unterstützt diese Methode jedoch nicht und alle IE-Browser können zwischen IE und FF unterscheiden.
6. Attributselektor: Wird zum Auswählen von Objekten mit bestimmten Attributen verwendet
span[class=left]{color:blue}
span[title]{color:red;}
IE6 unterstützt es nicht, aber es funktioniert gut in FF, sodass IE und FF separat verarbeitet werden können.
In der tatsächlichen Entwicklung müssen IE und FF häufig separat verarbeitet werden. Sie können den folgenden Code verwenden:
#Inhalt{
Farbe: rot;
}
[xmlnx] #content{
Farbe: blau
}
Ich denke, diese Methode ist sehr praktisch und wird häufig verwendet. Wenn Sie eine detailliertere Erklärung benötigen, kann ich sie noch einmal veröffentlichen.
7. Unterobjektauswahl:
span>p{color:red}
IE6 wird ebenfalls nicht unterstützt und kann auch zur Unterscheidung von IE und FF verwendet werden.
8. Tantek-Methode
#Inhalt{
Farbe:blau;
voice-family:""}"";
voice-family:inherit;
Farbe: rot;
}
Nach der Verwendung von Voice-Family im obigen Code wird die folgende Farbe nicht von den Browsern IE5.5 und niedriger analysiert. Daher wird die Textfarbe in IE6/7/FF und in IE5.5 und niedriger angezeigt wird im Browser blau angezeigt;
Darüber hinaus gibt es noch eine weitere Möglichkeit, mit Voice-Family umzugehen:
#Inhalt{
Farbe: rot;
Stimmenfamilie:"}"
voice-family:inherit;
Farbe:blau;
}
Mit dieser Methode wird der Text in IE6- und niedrigeren Browsern und FF-Browsern rot angezeigt, während der Text in IE5 und niedrigeren Browsern blau erscheint!
9. Escape-Attribute
p{width:200px;}
IE5.5 und niedriger werden ignoriert. Hinweis: Der Backslash darf nicht vor 0-9 oder dem Buchstaben af stehen
10. Bedingte Kommentare im IE 1. Einführung in bedingte Kommentare
Bedingte Kommentare im IE verfügen über eine hervorragende Fähigkeit, IE-Versionen von IE- und Nicht-IE-Versionen zu unterscheiden, und werden häufig im WEB-Design verwendet.
Hack-Methode.
Bedingte Kommentare können nur in IE5 und höher verwendet werden.
Wenn Sie mehrere IEs installiert haben, basieren die bedingten Kommentare auf der höchsten Version des IE.
Die Grundstruktur bedingter Kommentare ist dieselbe wie bei HTML-Kommentaren (<!– –>). Daher werden sie von anderen Browsern als dem IE als gewöhnliche Kommentare behandelt und vollständig ignoriert.
IE verwendet die if-Bedingung, um zu bestimmen, ob der Inhalt im bedingten Kommentar wie normaler Seiteninhalt analysiert werden soll.
2. Bedingte Anmerkungsattribute
gt: größer als, wählen Sie die bedingte Version oder höher aus, ausgenommen die bedingte Version
lt: kleiner als, wählen Sie die Version unterhalb der bedingten Version aus, mit Ausnahme der bedingten Version
gte: größer oder gleich, wählen Sie die bedingte Version oder höher aus, einschließlich der bedingten Version
lte: kleiner oder gleich, wählen Sie die Version unterhalb der bedingten Version aus, einschließlich der bedingten Version
! : Wählen Sie alle Versionen außer der bedingten Version aus, unabhängig von hoch oder niedrig, wie bedingte Kommentare verwendet werden
Achten Sie darauf, das <> im Code durch das entsprechende Größer- oder Kleiner-als-Zeichen im Englischen zu ersetzen.




Sie verwenden nicht den Internet Explorer
Sie verwenden Internet Explorer Version 6 oder einen Nicht-IE-Browser<!--<![endif]-Im

Folgenden werden drei umfassende Lösungen zusammengefasst:

Der erste Typ:

.div {
Hintergrundbereich;
*Hintergrund:grün !wichtig;
*background:blue;

}

Zweiter Typ:

.div {
Rand: 10 Pixel;
*Rand:15px;
_margin:15px;
}

Dritter Typ:

#div { color: #333;
* html #div { color: #666 }
*+html #div { color: #999;