Unterschiede in der DIV-Unterstützung zwischen IE6, IE7 und Firefox_Experience Exchange

1 CSS-Stile für Firefox ie6 ie7

Heutzutage verwenden die meisten von ihnen !important zum Hacken. Für ie6- und Firefox-Tests kann es normal angezeigt werden, aber ie7 kann !important korrekt interpretieren Dadurch wird die Seite nicht wie gewünscht angezeigt! 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; } /* Moz */
* html #1 { color: #666 } /* IE6 */
*+html #1 { color: #999; } /* IE7 */

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

2 Zentrierungsprobleme im CSS-Layout

Die wichtigsten Stildefinitionen lauten wie folgt:

body {TEXT-ALIGN: center;}
# center { MARGIN-RIGHT: auto; }

Erklärung:

Definieren Sie zuerst TEXT-ALIGN: center im übergeordneten Element; ist zentriert; für IE ist diese Einstellung ausreichend.

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 der Fall ist, wenn Sie diese Methode zum Zentrieren der gesamten Seite verwenden möchten Es wird empfohlen, es nicht in ein DIV einzuschließen. Sie können mehrere Divs nacheinander aufteilen. Definieren Sie einfach MARGIN-RIGHT: auto;MARGIN-LEFT: auto in jedem geteilten Div.

3 Verschiedene Interpretationen des Box-Modells.

#box{
width:600px;
//for 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
//for ie6.0-
}

4 Doppelte Distanz, die durch Floating erzeugt wird, dh

#box{ float:left; width:0 0 100px //In diesem Fall generiert IE einen Abstand von 200px display:inline; //Ignorieren Sie den Float}

Lassen Sie uns im Detail ü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). Eigenschaften des Inline-Elements sind: und andere Elemente befinden sich in derselben Zeile, ... können nicht gesteuert werden (Inline-Elemente);

#box{ display:block; //Kann Inline-Elemente als Blockelemente simulieren :inline; //Erzielen Sie die gleiche Zeile. Die Wirkung von diplay:table;

5 Probleme mit IE und Breite und Höhe
IE erkennt die Definition von nicht min-, aber tatsächlich wird die normale Breite verwendet. Verwenden Sie Höhe und Höhe, als ob es ein Minimum gäbe. 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;}html>body #box{ width: auto; height: 35px;}


6 Die Mindestbreite der Seite
min-width ist ein sehr praktischer CSS-Befehl. Er kann die Mindestbreite des Elements angeben Eine bestimmte Breite darf nicht unterschritten werden, um sicherzustellen, dass der Schriftsatz 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
unter dem

-Tag einfügen und dann eine Klasse für das div angeben: Dann ist das CSS wie folgt gestaltet:

#container{
min-width: 600px;
width:expression(document.body.clientWidth }
Die erste Min- Die Breite ist „Normal“. Die Breite in Zeile 2 verwendet jedoch 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;
//Anzeige des Objekts als Tabelle auf Blockelementebene
}

oder

.hackbox{
clear:both;
}

oder hinzufügen: after (Pseudoobjekt), um den Inhalt festzulegen, 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. Dies ist das problematischste

......#box:after{
content: "."
display: block
height: 0; beide;
Sichtbarkeit: versteckt;
}


8 DIV-Floating-IE-Text erzeugt einen 3-Pixel-Bug
Das linke Objekt schwebt und das rechte Seite verwendet eine äußere Position am linken Rand des Patches, der Text innerhalb des rechten Objekts ist 3 Pixel vom linken entfernt.
#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]{}div [id]{}
p[id]{}div[id]{}
Dies ist für Versionen unter IE6.0 und IE6.0 ausgeblendet und funktioniert weiterhin
Attributselektoren und Unterselektoren Es gibt einen Unterschied: Der Umfang des Unterselektors ist in der Form eingeschränkt, und der Umfang des Attributselektors ist relativ groß. In p[id] sind es beispielsweise alle p-Tags der gleiche Stil.


10 IE-Versteckproblem


Wenn die div-Anwendung komplex ist und in jeder Spalte einige Links vorhanden sind, wird das Versteckspiel angezeigt. Das Suchproblem von DIV kann zu diesem Zeitpunkt leicht auftreten.
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 Höhe ist nicht geeignet


Höhe ist nicht geeignet, wenn sich die Höhe des inneren Objekts ändert. Die Höhe der äußeren Ebene kann nicht automatisch angepasst werden, insbesondere wenn die inneres Objekt wird verwendet
Margin oder paddign. Beispiel:

 
Inhalt im p-Objekt

CSS:

#box {Hintergrundfarbe :#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 Code des div-Objekts: .1{height:0px;overflow:hidden;} oder fügen Sie das border-Attribut zum DIV hinzu.