Unterschiede in den CSS-Stylesheets zwischen den Browsern Firefox und IE-CSS-Tutorial-php.cn

1 CSS-Stil für Firefox ie6 IE7

Die meisten von ihnen werden jetzt mit !important gehackt. Für ie6- und Firefox-Tests kann es normal angezeigt werden, aber ie7 kann !important korrekt interpretieren, was dazu führt Seite zum Scheitern bringen. Ich habe einen guten Hack für IE7 gefunden, der darin besteht, „*+Html“ zu verwenden. Jetzt sollte es mit IE7 durchsucht werden, 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; MARGIN-LEFT: auto; }

Definieren Sie zuerst TEXT-ALIGN: center im übergeordneten Element Diese Einstellung reicht aus.

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, solange Sie MARGIN-RIGHT: auto;MARGIN-LEFT: auto in jedem geteilten Div definieren.

3 Verschiedene Interpretationen des Box-Modells.

#box{

width:600px;

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

4 Doppelter Abstand, erzeugt durch Floating ie

#box{ float:left; width:0 0 0 100px; In diesem Fall generiert IE einen Abstand von 200 Pixeln. display:inline; // Die schwebenden Elemente ignorieren🎜>

Hier sind die beiden Elemente block und inline, Block Die Eigenschaften des Elements sind: Es beginnt immer auf a Neue Zeile, Höhe, Breite, Zeilenhöhe und Ränder können alle gesteuert werden (Blockelemente); die Eigenschaften des Inline-Elements sind: Es befindet sich in derselben Zeile wie andere Elemente, ... kann nicht gesteuert werden (Inline-Elemente). );

#box{ display:block; //Kann Inline-Elemente als Blockelemente simulieren display:inline; //Erzielen Sie den Effekt, dass sie in derselben Zeile angeordnet sind diplay:table;

5 Probleme mit IE und Breite und Höhe

IE erkennt die Definition von min- nicht, behandelt aber tatsächlich normale Breite und Höhe so, als ob es min 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 festlegen, dass das Element mindestens eine bestimmte Breite haben muss Das Layout kann immer korrekt sein. 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:e Eine minimale Breite ist normal; die Breite in Zeile 2 verwendet jedoch Javascript, das nur vom IE erkannt wird, wodurch auch Ihr HTML erstellt wird Dokument weniger formell. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.

7 Floating

.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, normalerweise in Verbindung verwendet mit Inhalt, IE Dieses Pseudoobjekt wird nicht unterstützt 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;
clear : beides;

Sichtbarkeit: versteckt; 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 Attributauswahl (dies kann nicht als kompatibel angesehen werden, es handelt sich um einen Fehler im versteckten CSS)

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

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

Dies ist für IE6.0 und Versionen darunter ausgeblendet 🎜>
Es gibt immer noch einen Unterschied zwischen Attributselektor und Unterselektor. Der Umfang des Attributselektors ist beispielsweise in p[id ], alle p-Tags mit IDs haben den gleichen Stil.

10 IE-Versteckproblem

Wenn die div-Anwendung komplex ist, gibt es in jeder Spalte einige Links und verbirgt sich -and-seek-Probleme können in DIVs 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 eine feste Höhe und Breite für #layout. Halten Sie die Seitenstruktur so einfach wie möglich.

11 Ungeeignete Höhe

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

Rand oder verwendet Paddign-Stunde. Beispiel:

Inhalt im p-Objekt

CSS ::

#box {background-color:#eee; }
#box p {margin-top: 20px; text-align:center; }

Fügen Sie zwei leere Div-Objekte über und unter dem P-Objekt hinzu: .1{height:0px;overflow:hidden;} oder fügen Sie dem DIV das Border-Attribut hinzu.

Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Verwandte Etiketten：

Firefox，CSS样式，差异

Quelle：php.cn

Vorheriger Artikel：Zentrieren Sie das Layout_zentrieren Sie das Hintergrundbild_zentrieren Sie den Textinhalt in DIV+CSS Nächster Artikel：Vor- und Nachteile von CSS-Frameworks

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors