Detaillierte Einführung in häufig gestellte Fragen zum CSS-Multibrowsing

Es ist ein alltägliches Problem, dass CSS mit verschiedenen Browsern kompatibel ist.
Der folgende Inhalt ist nicht allzu neu und dient nur als persönliche Zusammenfassung Anfänger.
1. CSS-HACK
Die folgenden zwei Methoden können heute fast alle HACKs lösen.

1, !important

Mit IE7-Unterstützung für !important, die !important-Methode jetzt HACK nur für IE6.
(Achten Sie auf die Schreibweise. Denken Sie daran, dass die Deklarationsposition im Voraus angegeben werden muss.)

2, IE6/IE77 vs. Firefox

* +html und *html sind IE-spezifische Tags, die von Firefox nicht unterstützt werden. Und *+html ist ein IE7-spezifisches Tag

{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 behoben */
*+html #wrapper { width: 60px; } /* ie7 behoben, auf Reihenfolge achten*/
}



Hinweis:

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

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 zu Global CSS hinzu und fügen Sie ihn hinzu class="clearfix" zu dem p, das geschlossen werden muss. Es funktioniert jedes Mal 🎜>content:";

display:block;
clear:both;
.clearfix
{
display:inline-block;

}

/* Ausblenden vor IE Mac * /
.clearfix {display:block;}
/* Ausblenden vor IE Mac */
/ * Ende von Clearfix */
wird nicht. (kann mit !important gelöst werden)
2, Zentrierung auf die gleiche Höhe wie das aktuelle p, und dann Vertical-Align: Middle. (Achten Sie darauf, den Inhalt nicht umzubrechen.)
2). Horizontal zentriert: 0 automatisch;
3 Sie müssen display: block; festlegen (häufig in Navigations-Tags zu finden)
4. Der Unterschied im BOX-Verständnis zwischen FF und IE führt zu einem Unterschied von 2 Pixeln, und einige Einstellungen sind auf Float eingestellt, z Rand unter IE.
5, Das ul-Tag verfügt standardmäßig über Listenstil und Auffüllung. Es ist am besten, es im Voraus zu deklarieren, um unnötige Probleme zu vermeiden.
6. Als externer Wrapper sollte p keine feste Höhe haben. Um eine Höhenanpassung zu erreichen, ist der Zeiger nur für den IE geeignet >
1 CSS-Stile für Firefox ie6 ie7
Heutzutage verwenden die meisten von ihnen !important zum Hacken, und der Test für ie6 und Firefox kann normal angezeigt werden
Aber ie7 kann !important richtig interpretieren, was dazu führt Seite Wird nicht wie erforderlich angezeigt! Finden Sie einen Pin
Ein guter Hack für IE7 ist die Verwendung von „*+html“. Durchsuchen Sie ihn jetzt mit IE7 und es sollte kein Problem geben.
Schreiben Sie nun ein CSS wie dieses:

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */
Dann wird die Schriftfarbe unter Firefox als #333, unter IE6 als #666 und unter IE7 als #999 angezeigt.

2 Zentrierungsprobleme im CSS-Layout
Die wichtigsten Stildefinitionen lauten wie folgt:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN -LEFT: auto; }
Erklärung:
Definieren Sie zuerst TEXT-ALIGN: center im übergeordneten Element. Dies bedeutet, dass der Inhalt im übergeordneten Element zentriert ist.

Aber es kann nicht in Mozilla zentriert werden. Die Lösung besteht darin, beim Festlegen der Definition des untergeordneten Elements „MARGIN-RIGHT: auto;MARGIN-LEFT: auto;“ hinzuzufügen. Beachten Sie, dass dies nicht empfohlen wird, wenn Sie diese Methode zum Zentrieren der gesamten Seite verwenden möchten Um in einem p zu setzen, können Sie mehrere ps nacheinander abtrennen.

Definieren Sie einfach MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

3 Verschiedene Interpretationen des Box-Modells

#box{ width:600px; //for ie6.0- //for ff+ie6.0}

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

4 Double generiert durch Floating dh Entfernung

#box{ float:left; width:100px; margin:0 0 0 100px; //In diesem Fall generiert IE einen Abstand von 200px display:inline; //Ignorieren Sie den Float}
Details hier Schauen Sie sich die beiden Elemente Block und Inline an. Die Eigenschaften des Blockelements sind: Es beginnt immer in einer neuen Zeile und die Höhe, Breite, Zeilenhöhe und die Ränder können alle gesteuert werden (die Eigenschaften des Inline-Elements). Element ist: Es befindet sich auf derselben Seite wie andere Elemente, ... kann nicht gesteuert werden (Inline-Elemente);

#box{ display:block; //Kann Inline-Elemente als Blockelemente simulieren display:inline; //Erzielen Sie eine Anordnung in derselben Zeile. Wirkung diplay:table;

IE erkennt die Definition von min- nicht, behandelt aber tatsächlich normale Breite und Höhe, als ob es min wäre. Dies führt zu einem großen Problem.
Diese beiden Werte ändern sich in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Mindesthöhe verwenden, ist dies gleichbedeutend mit nicht Einstellen der Breite und Höhe unter IE hoch.
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;}html>body { width: auto; min-height: 35px; ;}

6 Mindestbreite der Seite

min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite des Elements nicht kleiner als eine bestimmte Breite sein darf Das Layout kann immer korrekt sein. Aber der IE erkennt dies nicht
und behandelt die Breite tatsächlich als die Mindestbreite. Um diesen Befehl auch im IE verfügbar zu machen, können Sie ein -Tag einfügen und dann eine Klasse für p angeben:
Dann ist das CSS wie folgt gestaltet:
# 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, wodurch Ihr HTML-Dokument auch weniger formal wird. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.

7 Floats löschen

.hackbox{ display:table; //Das Objekt als Tabelle auf Blockelementebene anzeigen} oder .hackbox{ clear:both;}
Oder hinzufügen: after (Pseudoobjekt), legt den Inhalt fest, der nach dem Objekt auftritt, und wird normalerweise in Verbindung mit Inhalten verwendet. IE unterstützt dieses Pseudoobjekt nicht, und Nicht-IE-Browser unterstützen es.
Es hat also keine Auswirkungen auf IE/WIN-Browser . Das Schwierigste daran...#box:after{ content: "."; display: block height: 0; clear: bides; ein 3-Pixel-Bug

Das linke Objekt schwebt, die rechte Seite wird mithilfe des linken Randes des äußeren Patches positioniert und der Text im rechten Objekt hat einen Abstand von 3 Pixeln vom linken.

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

HTML-Code

9 Attributselektor (dies gilt nicht als kompatibel, es handelt sich um einen Fehler beim Ausblenden von CSS)

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

Dies gilt für IE6.0- und IE6-Versionen unter .0. Die Funktionen von FF und OPera sind immer noch unterschiedlich. Der Umfang der Unterselektoren ist in der Form eingeschränkt Die Anzahl der Attributselektoren ist relativ groß, z. B. p[id], alle p-Tags mit IDs haben den gleichen Stil.

10 IE-Versteckproblem

Wenn die p-Anwendung ist komplex, es gibt einige Links in jeder Spalte, p usw. Zu diesem Zeitpunkt treten häufig Versteckprobleme 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 feste Höhe und Breite für #layout. Halten Sie die Seitenstruktur so einfach wie möglich.

11 Nicht-Höhenanpassung

Nicht-Höhenanpassung bedeutet, dass die Höhe der äußeren Ebene nicht automatisch angepasst werden kann, wenn sich die Höhe des Objekts der inneren Ebene ändert, insbesondere wenn sich das Objekt der inneren Ebene ändert verwendet

Marge oder Paddign-Stunde.

Beispiel:

Inhalt im p-Objekt

-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
Lösung: Fügen Sie 2 Leerzeichen über und unter dem P-Objekt hinzu CSS-Code: .1{height:0px;overflow:hidden;} oder fügen Sie das border-Attribut zu p hinzu.

6. Analyse der CSS-Kompatibilitätspunkte IE vs. FF

CSS-Kompatibilitätspunkte:

DOCTYPE beeinflusst die CSS-Verarbeitung

FF: p Set margin-left, margin -right ist bereits zentriert, wenn es auf „Auto“ eingestellt ist, der IE kann dies jedoch nicht

FF: Nach dem Festlegen des Abstands erhöht p die Höhe und Breite, IE jedoch nicht, daher müssen Sie !important verwenden, um eine zusätzliche Höhe und Breite festzulegen

FF: !important wird unterstützt, aber IE wird es ignorieren, wichtig. Legen Sie den Stil speziell für FF fest, um das vertikale Zentrierungsproblem von

p zu lösen: Vertical-align:middle; Erhöhen Sie den Zeilenabstand auf die gleiche Höhe wie die gesamte p-Zeilenhöhe :200px; Fügen Sie dann Text ein und er wird vertikal zentriert. Der Nachteil besteht darin, dass der Inhalt ohne Umbruch gesteuert werden muss

Cursor: Der Zeiger kann gleichzeitig die Form des Cursorfingers in IE FF anzeigen, die Hand kann nur in IE

FF verwendet werden :link fügt eine Rahmen- und Hintergrundfarbe hinzu und muss den display:block und float:left festlegen, um sicherzustellen, dass keine Zeilenumbrüche erfolgen. Bezogen auf die Menüleiste dient das Festlegen der Höhe von a und der Menüleiste dazu, eine Verschiebung der unteren Randanzeige zu vermeiden. Wenn die Höhe nicht festgelegt ist, können Sie in der Menüleiste ein Leerzeichen einfügen.

Dort Die Verwendung der XHTML+CSS-Architektur bietet viele Vorteile, aber es gibt tatsächlich einige Probleme, sei es aufgrund ungeschickter Verwendung oder unklarer Denkweise. Ich werde zunächst einige der Probleme aufschreiben, auf die ich gestoßen bin, um allen die Suche zu ersparen^^

1. In Mozilla ist die BOX-Modellinterpretation in Firefox und IE inkonsistent, was zu einem Unterschied von 2 Pixel führt:

p{margin:30px!important;margin:28px;}

Beachten Sie, dass die Reihenfolge dieser beiden Ränder nicht geschrieben werden darf. Im Gegenteil, laut Ajie wird das !important-Attribut vom IE nicht erkannt, andere Browser jedoch schon. Unter IE wird es also tatsächlich so interpretiert:

p{maring:30px;margin:28px}

Wenn Sie die Definition wiederholen, wird sie gemäß der letzten ausgeführt, also Sie kann nicht einfach margin:XXpx!important ;

2 schreiben. Die BOX-Interpretation von IE5 und IE6 ist inkonsistent. Die Breite von p{width:300px;margin:0 10px 0 10px;}p wird unter IE5 interpretiert als 300px-10px (rechter Abstand)-10px (linker Abstand) Die endgültige Breite von p beträgt 280px, während in IE6 und anderen Browsern die Breite als 300px+10px (rechter Abstand) + 10px (linker Abstand) = 320px berechnet wird. Zu diesem Zeitpunkt können wir die folgenden Änderungen vornehmen:

p{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

, darüber/**/ Ich verstehe nicht ganz, was es ist. Ich weiß nur, dass IE5 und Firefox unterstützt werden es, aber IE6 nicht, bitte lassen Sie es mich wissen, danke! :)

3. Das ul-Tag hat in Mozilla standardmäßig einen Padding-Wert, aber im IE hat nur margin einen Wert, also definieren Sie ihn zuerst

ul{margin:0;padding:0 ;}

kann die meisten Probleme lösen

4. In Bezug auf Skripte wird das Sprachattribut in xhtml1.1 nicht unterstützt. Sie müssen nur den Code in

< ändern. type=" text/java">

Das ist es

10 CSS-Kenntnisse, die Sie vielleicht nicht kennen

1. CSS-Schriftattribut-Abkürzungsregeln

Im Allgemeinen werden Schriftartattribute mit CSS folgendermaßen festgelegt:

font-weight:bold;

font-style:italic;

font-varient:small-caps ;

Schriftgröße:1em;

Zeilenhöhe:1,5em;

Schriftfamilie:verdana,sans-serif;

Aber es Sie können sie auch alle in einer Zeile schreiben:

Schriftart: fett kursiv Kapitälchen 1em/1,5em verdana,sans-serif;

Großartig! Nur eine Einschränkung: Diese Kurzschriftmethode funktioniert nur, wenn sowohl die Eigenschaften „font-size“ als auch „font-family“ angegeben sind. Auch wenn Sie „font-weight“, „font-style“ und „font-variant“ nicht festlegen, werden Standardwerte verwendet. Denken Sie also daran.

2. Zwei Klassen gleichzeitig verwenden

Im Allgemeinen kann nur eine Klasse (Klasse) für ein Element festgelegt werden, dies bedeutet jedoch nicht, dass nicht zwei verwendet werden können. Tatsächlich können Sie Folgendes tun:

...

Geben Sie dem P-Element zwei Klassen gleichzeitig, mit Leerzeichen dazwischen Aktivieren Sie diese Option, sodass alle Attribute der Text- und Seitenklassen zum P-Element hinzugefügt werden. Wenn es einen Konflikt zwischen den Attributen in den beiden Klassen gibt, wird das später festgelegte Attribut wirksam, dh die später in der CSS-Datei platzierten Attribute der Klasse werden wirksam.

Ergänzung: Für eine ID können Sie weder

...

schreiben

3 des CSS-Rahmens Der Standardwert

kann normalerweise die Farbe, Breite und den Stil des Rahmens festlegen, z. B.:

Rahmen: 3 Pixel durchgehend #000

Dadurch wird angezeigt Rand 3 Pixel breit, schwarz, durchgezogene Linie. Tatsächlich müssen Sie hier jedoch nur den Stil angeben.

Wenn nur der Stil angegeben ist, verwenden andere Attribute Standardwerte. Im Allgemeinen ist die Standardbreite des Rahmens mittel, was im Allgemeinen 3 bis 4 Pixel entspricht. Wenn dieser Wert genau richtig ist, müssen nicht so viele Einstellungen vorgenommen werden.

4. CSS für den Dokumentendruck

Viele Websites haben eine Version zum Drucken, aber tatsächlich ist diese nicht erforderlich, da CSS zum Festlegen des Druckstils verwendet werden kann.

Mit anderen Worten, Sie können zwei CSS-Dateien für die Seite angeben, eine für die Bildschirmanzeige und eine für den Druck:

Die erste Zeile dient der Anzeige, die zweite Zeile dient dem Drucken, achten Sie auf das Medienattribut.

Aber was sollte in das Druck-CSS geschrieben werden? Sie können es auf die gleiche Weise einrichten, wie Sie normales CSS entwerfen würden. Beim Entwerfen können Sie dieses CSS so einstellen, dass es CSS anzeigt, um seine Wirkung zu überprüfen. Möglicherweise verwenden Sie den Befehl display: none, um einige dekorative Bilder und einige Navigationsschaltflächen zu deaktivieren. Weitere Informationen finden Sie im Artikel „Druckunterschiede“.

5. Fähigkeiten zum Ersetzen von Bildern

Es wird allgemein empfohlen, Standard-HTML zum Anzeigen von Text anstelle von Bildern zu verwenden, was nicht nur schneller, sondern auch besser lesbar ist. Wenn Sie jedoch spezielle Schriftarten verwenden möchten, können Sie nur Bilder verwenden.

Wenn Sie beispielsweise ein Symbol für den Verkauf von Dingen erstellen möchten, würden Sie dieses Bild verwenden:

Natürlich ist es möglich, aber für Suchmaschinen haben sie im Vergleich zu normalem Text wenig Interesse am Ersatztext in alt. Das ist weil viele Designer hier viele Schlüsselwörter einfügen, um Suchmaschinen auszutricksen. Die Methode sollte also so aussehen:

Widgets kaufen

Aber auf diese Weise gibt es keine spezielle Schriftart. Um den gleichen Effekt zu erzielen, können Sie CSS wie folgt entwerfen:

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px 🎜>

Achten Sie darauf, die Bildhöhe durch die Höhe des echten Bildes zu ersetzen. Hier wird das Bild als Hintergrund angezeigt, und da für den echten Text eine Einrückung von -2000 Pixeln eingestellt ist, erscheinen diese 2000 Punkte auf der linken Seite des Bildschirms und sind unsichtbar. Aber Leute, die das Bild ausschalten, können es möglicherweise überhaupt nicht sehen, seien Sie also vorsichtig.

6. Eine weitere Anpassungstechnik für das CSS-Box-Modell

Diese Anpassung des Box-Modells gilt hauptsächlich für IE-Browser vor IE6. Sie zählen die Rahmenbreite und den Leerraum als übergeordnete Elemente . Zum Beispiel:

#box { width: 100px; border: 5px; padding: 20px }

Nennen Sie es so:

Zu diesem Zeitpunkt sollte die volle Breite des Felds 150 Punkte betragen, was in allen Browsern außer IE-Browsern vor IE6 korrekt ist. Aber in Browsern wie IE5 beträgt die volle Breite immer noch 100 Punkte. Dieser Unterschied kann mit der von früheren Leuten erfundenen Box-Anpassungsmethode behoben werden.

Aber derselbe Zweck kann mit CSS erreicht werden, um eine konsistente Anzeige zu gewährleisten.

#box { width: 150px } #box p { border: 5px; padding: 20px }

Aufruf wie folgt:

...

Auf diese Weise beträgt die Breite unabhängig vom Browser 150 Punkte.

7. Blockelemente in der Mitte ausrichten

Wenn Sie eine Webseite mit fester Breite erstellen möchten und die Webseite horizontal zentriert sein soll, geht das normalerweise so:

#content { width: 700px ; margin: 0 auto }

Sie würden

verwenden. Das ist einfach, aber nicht gut genug, und Versionen vor IE6 zeigen diesen Effekt nicht. Ändern Sie das CSS wie folgt:

body { text-align: center } #content { text-align: left; width: 700px; auto }

Dadurch wird der Inhalt zentriert Also wurde

text-align: left zum Inhalt hinzugefügt.

8. Verwenden Sie CSS für die vertikale Ausrichtung

Eine vertikale Ausrichtung lässt sich ganz einfach mithilfe von Tischen erreichen. Stellen Sie einfach die Tischeinheit vertikal aus: Mitte. Aber das ist mit CSS nutzlos. Wenn Sie eine Navigationsleiste auf eine Höhe von 2 cm festlegen möchten und möchten, dass der Navigationstext vertikal zentriert ist, ist das Setzen dieses Attributs nutzlos.

Was ist die CSS-Methode? Stellen Sie übrigens die Zeilenhöhe dieser Wörter auf 2em ein: line-height: 2em und fertig.

9. Positionierung von CSS innerhalb eines Containers

Ein Vorteil von CSS besteht darin, dass Sie ein Element beliebig positionieren können, sogar innerhalb eines Containers. Zum Beispiel für diesen Container:

#container { position: relative }

Auf diese Weise werden alle Elemente im Container relativ positioniert. Sie können es wie folgt verwenden:

...

Wenn Sie es 30 Punkte positionieren möchten Von links und 5 Punkte von oben können Sie dies tun:

#navigation { position: absolute left: 30px; top: 5px }

Natürlich können Sie dies auch tun :

Rand: 5px 0 0 30px

Beachten Sie, dass die Reihenfolge der 4 Zahlen ist: oben, rechts, unten, links. Natürlich ist manchmal die Positionierung statt der Ränder besser.

10. Die Hintergrundfarbe, die direkt bis zum unteren Bildschirmrand reicht

kann in vertikaler Richtung nicht durch CSS gesteuert werden. Wenn Sie möchten, dass die Navigationsleiste wie die Inhaltsleiste direkt an den unteren Rand der Seite gelangt, ist es sehr praktisch, eine Tabelle zu verwenden. Wenn Sie jedoch nur CSS wie folgt verwenden:

#navigation { Hintergrund: blau ; Breite: 150px }

Eine kürzere Navigationsleiste reicht nicht direkt nach unten, sondern endet, wenn der Inhalt auf halbem Weg endet. Was zu tun?

Leider besteht die einzige Möglichkeit zum Schummeln darin, der kürzeren Spalte ein Hintergrundbild hinzuzufügen, dessen Breite der Spaltenbreite entspricht und dessen Farbe mit der eingestellten Hintergrundfarbe übereinstimmt.

Körper { Hintergrund: url(/blog/blue-image.gif) 0 0 Wiederholung-y }

Sie können em derzeit nicht als Einheit verwenden, da in diesem Fall einmal Der Leser ändert die Schriftgröße, dieser Trick wird enthüllt, es können nur px verwendet werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in häufig gestellte Fragen zum CSS-Multibrowsing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!