Beispielerklärung der CSS-Kompatibilitäts-Schreibmethode

Gemeinsame Browser-Kernel-Engines und spezifische Anwendungen:

Trident: IE;

Gecko: Firefox

Webkit: Safari, Google Chrome, Travel 3, Cheetah, Baidu ;

Presto: Opera - Opera mini

Schreibreihenfolge : Firefox, IE8, IE7, IE6

IE6:*,_

IE7:*,+

IE8:9,

IE: Versionen unter ie7 unterstützen keine abgerundeten Ecken.
FF: -moz-border-radius:4px

Browserfehler
IE-Fehler mit doppeltem Rand

Der für ein Div-Set, das unter IE auf Float eingestellt ist, festgelegte Spielraum wird verdoppelt. Dies ist ein Fehler, der in ie6 vorhanden ist.

Lösung: display:inline; hinzufügen

Floating

DIV Floating IE Text Generation 3 Pixel Bug
Der Das linke Objekt schwebt und der rechte Rand wird mithilfe des linken Rands des äußeren Patches positioniert. Der Text im rechten Objekt ist 3 Pixel vom linken entfernt. left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

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

>

IE-Versteckproblem

Wenn die div-Anwendung komplex ist, in jedem Fall Spalte Es gibt einige Links, DIVs usw. Es kann zu diesem Zeitpunkt leicht zu Versteckproblemen kommen.
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.

Privates IE-Layout-Attribut
Stellen Sie als externes Wrapper-Div die Höhe nicht ein, damit die Höhe automatisch angepasst wird Muss sich im Wrapper befinden. Wenn eine Box mit Float enthalten ist, ist die automatische Höhenanpassung unter IE ungültig. Zu diesem Zeitpunkt sollte das private Layout-Attribut des IE aktiviert werden zoom:1; um dies zu erreichen.

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

Schriftsatz

Wir verwenden Die gebräuchlichste CSS-Beschreibung ist möglicherweise float:left. Manchmal müssen wir einen einheitlichen Hintergrund hinter dem Float-Div in der n-Spalte erstellen, zum Beispiel:

;

Wir möchten den Hintergrund der Seite auf Blau setzen, sodass die Hintergrundfarbe aller drei Spalten blau ist, aber wir werden feststellen, dass die linke Mitte rechts nach unten verläuft , aber die Seite behält tatsächlich die gleiche Höhe. Das Problem besteht darin, dass die Seite kein Float-Attribut hat und unsere Seite nicht auf Float gesetzt werden kann, da sie zentriert sein muss. Deshalb fügen wir ihr ein übergeordnetes Element hinzu, page Opa werden;

Höhen-Nichtanpassung

Höhen-Nichtanpassung bedeutet, dass sich die Höhe der äußeren Schicht nicht ändern kann, wenn sich die Höhe des inneren Objekts ändert automatisch angepasst werden, insbesondere wenn das innere Objekt bei Verwendung von margin oder paddign verwendet wird.
Beispiel:
#box { }

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

Inhalt im p-Objekt

Lösungstechnik: Fügen Sie 2 leere div-Objekte oberhalb und unterhalb des P-Objekts hinzu ;overflow:hidden;} Oder fügen Sie das border-Attribut zum DIV hinzu.

Warum gibt es unter dem Bild unter IE6 eine Lücke?

Es gibt viele Techniken, um diesen Fehler zu beheben. Sie können das Layout des HTML ändern. oder stellen Sie das Bild so ein, dass es angezeigt wird: Block oder setzen Sie das Attribut „vertikal-align“ auf „vertikal-align:top 　bottom 　middle 　text-bottom kann

CSS-Fehler des IE

Nach dem Hinzufügen von Leerzeichen zu p:first-letter und {font-size:300%}, also p:first-letter {font-size:300%}, wird die Anzeige normal. Aber der gleiche Code sieht unter FireFox normal aus. Logisch gesehen ist die Schreibweise von p:first-letter{font-size:300%} korrekt. Was ist also das Problem? Die Antwort ist der Bindestrich „-“ in der Pseudoklasse. Im IE liegt ein Fehler vor. Wenn der Name der Pseudoklasse einen Bindestrich „-“ enthält, muss dem Namen der Pseudoklasse ein Leerzeichen folgen, andernfalls ist die Stildefinition ungültig. In FF kann es normal mit oder ohne Leerzeichen verarbeitet werden.

Das Div ist bereits zentriert, wenn margin-left und margin-right auf „Auto“ eingestellt sind. IE muss zuerst den Text-Algin festlegen : center; this im übergeordneten Element Dies bedeutet, dass der Inhalt innerhalb des übergeordneten Elements zentriert ist.

Vertikale Zentrierung=>Problem beim Umschließen des Inhalts

Ein Div mit einer Höhe von 30 Pixel zeigt standardmäßig die obere linke Ecke an. Wenn Sie es vertikal zentrieren möchten, können Sie einen Zeilenhöhe:30 Pixel hinzufügen. Wenn Sie möchten, dass es unten ist, ändern Sie die Zeilenhöhe

. Je größer der Wert, desto niedriger ist er. Um zu verhindern, dass er platzt, müssen Sie einen anderen Stil angeben: overflow:hidden;

Legen Sie drei Stile für Objekte auf Blockebene fest, um die Browser-Standardwerte zu lösen: Breite und Höhe überfl

Tipps für die Anzeige von Inhalten mit Auslassungspunkten danach Der Inhalt überschreitet die Länge in LI

Diese Technik ist auf IE- und OP-Browser anwendbar

li {

width:200px
white-space:nowrap;
text-overflow:ellipsis;
overflow: versteckt;

Warum kann IE keine Bildlaufleisten in Webstandards festlegen? Die Lösung besteht darin, den Textkörper durch HTML zu ersetzen

html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeee; eeeee;

scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff>}




Warum kann ich keinen Container mit einer Höhe von etwa 1 Pixel definieren?
Dieses Problem unter IE6 wird durch die Standardzeilenhöhe verursacht und es gibt viele Lösungstechniken, wie zum Beispiel: overflow:hidden zoom:0.08 line-height:1px

CSS-Initialisierung

Das Margin-Attribut ist für IE gültig und das Padding-Attribut ist für Firefox gültig .

body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin :0;padding:0;}

img{border:0px;}

1. ul {margin:0px;padding:0px;} / 

2. ul li {list-style:none;}

3. /* Clear Fix */

   .clearfix:after {

   Inhalt:“;
display:block;
4. clear:both;

   .clearfix {

   display :inline-block;
}

/* Ausblenden vor IE Mac */

.clearfix {display:block;}
/* Ende ausblenden vor IE Mac */
/* Ende von clearfix */

Oder setzen Sie es so: .hackbox{ display:table; //Zeigen Sie das Objekt als Tabelle auf Blockelementebene an}



Zu viele Referenzen :

Das obige ist der detaillierte Inhalt vonBeispielerklärung der CSS-Kompatibilitäts-Schreibmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!