Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der CSS-Hacking-Methoden zur Angabe des Doctypes einer Webseite

Zusammenfassung der CSS-Hacking-Methoden zur Angabe des Doctypes einer Webseite

高洛峰
高洛峰Original
2017-02-13 14:04:421492Durchsuche

Wir alle wissen, dass Sie als WD (Webdesigner) zunächst mehrere Browser bedienen müssen: IE6, IE7 und Firefox. Allgemeine Seiten müssen nur unter IE6, IE7 und Firefox normal funktionieren.

Aber tatsächlich gibt es weit mehr als nur diese Browser. Firefox ist in mehrere Hauptversionen unterteilt: Firefox 1.5, Firefox 2 und Firefox 3. Darüber hinaus gibt es mehrere Serien in IE7 und IE6 diese beiden Neben Produkten von Mainstream-Herstellern gibt es auch eine Reihe von Opera, Konqueror, Netscape, Chrome usw.

Jeder dieser Browser hat seine eigenen Regeln. Hier läuft er oft normal und dort nicht richtig. Also hat WD den Osten abgerissen und den Westen repariert, und schließlich funktionierte es unter mehreren Browsern normal. Dadurch hatte der Produktmanager neue Bedürfnisse und musste hier und da Änderungen vornehmen. Dadurch brach der letztendlich getäuschte Papierrahmen plötzlich zusammen und die WDs waren wieder extrem beschäftigt. Der Grund, warum ich das sage, ist, dass es meine Erfahrung ist.

Normalerweise sammelt WD immer eine Reihe von CSS-Hacking-Kenntnissen, damit es unter verschiedenen Browsern ordnungsgemäß funktioniert. Wenn man online sucht, gibt es viele davon.

Allerdings hat WD zunächst keine grundlegende Frage herausgefunden: Warum brauchen wir CSS-Hacking? Wenn es 1.000 Browser gibt, müssen wir uns dann an die Hack-Fähigkeiten von 1.000 Browsern erinnern?

Tatsächlich ist CSS-Hacking bis zu einem gewissen Grad etwas, das nicht auf dem Tisch liegt. Es gibt viele Techniken beim CSS-Hacking, die einfach Browserfehler ausnutzen. Beispielsweise ist es üblich, _class{….} ​​​​zu verwenden, um zwischen IE und Firefox zu unterscheiden. Logischerweise ist _class eine illegale Tagging-Methode. Das Aufkommen von CSS-Hacking ist der letzte Ausweg für WDs. Die tägliche Arbeit von WDs ist kein verrücktes CSS-Hacking. Tatsächlich gibt es so viele Browser, dass man nicht einfach herumspielen und definieren kann, was man will . Definieren Sie eine Marke. Die Menschen sind es gewohnt, in einer Standardwelt zu leben, und auch in der Webwelt gibt es eine Reihe von Standards. Auch Browser arbeiten hart daran, mit Webstandards kompatibel zu sein. Einige Browser debütierten jedoch schon früh, und man kann sagen, dass die später entstandenen Webstandards unter ihrem Einfluss entstanden sind. Es gibt einen anderen, der damals sehr gut war, also viele Innovationen machte und sich Webstandards nicht zu Herzen nahm. Darüber hinaus werden die Standards selbst ständig aktualisiert. Daher durchlief jedes Browser-Produktsystem eine Zeit, in der es sich nicht besonders um Webstandards kümmerte. Später wurde allen klar, dass es nicht mehr möglich war, Kompromisse einzugehen und eine Reihe von Standards festzulegen, an die sich jeder halten würde. Aber in der Vergangenheit hatte jedes Unternehmen einige kleine Regeln und Vorschriften formuliert, was sie tun sollten, wenn sie die Standards nicht erfüllten.

Also haben diese Leute eine Lösung gefunden: Standardmodus und seltsam Modus. Es gibt einen anderen, der „Fast-Standard-Modus“ heißt, fast Standard. Es ist so seltsam, dass ich fast ohnmächtig geworden bin. Mach dir keine Sorgen, hör mir einfach langsam zu.

Habe ich nicht gesagt, dass diese Chefs zusammengesessen und verschiedene Standards formuliert haben und jeder in Zukunft Webseiten gemäß dieser Reihe von Standards interpretieren wird? Wenn die von Ihnen erstellte Webseite gemäß diesen Standards interpretiert werden kann, verwenden Sie ein Tag-Doctype, um anzugeben, dass sie gemäß Webstandards interpretiert werden kann. Dies ist der Standardmodus.

Was soll ich also tun, wenn die Xiaojiujiu-Produkte, die in der Vergangenheit von verschiedenen Unternehmen hergestellt wurden, nicht den Standards entsprechen? Man kann sie nicht einfach alle wegwerfen, oder? Es gibt wahrscheinlich eine Reihe von Prinzipien in der Software, die als Abwärtskompatibilität bezeichnet werden. Im seltsamen Modus simuliert jeder Browser den Betrieb dieser älteren Versionen des Browsers, um zu verhindern, dass ältere Seiten nicht funktionieren. Wenn die Webseite keinen Dokumenttyp angibt, arbeitet der Browser normalerweise in einem seltsamen Modus, um zu verhindern, dass die alte Seite funktioniert.

Das bemerkenswerteste Beispiel für die Unterschiede zwischen diesen beiden Modi ist das proprietäre Box-Modell des IE unter Windows. Als IE 6 herauskam, wurde im Standardmodus das richtige Boxmodell und im Seltsamkeitsmodus das alte proprietäre Boxmodell verwendet. Um die Abwärtskompatibilität mit IE 5 und früheren Versionen aufrechtzuerhalten, verwenden Opera 7 und höher auch das fehlerhafte IE-Box-Modell im seltsamen Modus.

Mozilla und Safari verfügen außerdem über einen dritten Modus namens „Fast-Standards-Modus“, der bis auf einige geringfügige Unterschiede in der Handhabung von Tabellen mit den Standards identisch ist.

Aus diesem Grund können Sie viele CSS-Hacking-Techniken wegwerfen. In einigen Büchern heißt es, dass das Box-Modell (oder an manchen Stellen das Box-Modell) von IE6 und Firefox inkonsistent ist, daher müssen Sie diesen Hack ausführen:

p{
width:100px
*width :95px ;
}

Ich sage, diese Art von Buch ist wirklich irreführend. Denn solange der Doctype korrekt angegeben ist, verschwinden diese Unterschiede in der Browserinterpretation und wir können uns einfach an den Standard halten.

Dieser Modus wird durch das DOCTYPE-Feld am Anfang der HTML-Datei angegeben. Die gebräuchlichsten sind:

HTML 4.01 Transitional:


Code kopieren

Der Code lautet wie folgt:

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

HTML 4.01 Frameset


Code kopieren
Der Code lautet wie folgt:


>


 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">


"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">


 W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-frameset.dtd">



Code kopieren
Der Code lautet wie folgt:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1// EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Weitere Doctype-Lösungen für bestimmte Webseiten, eine Zusammenfassung der CSS-Hacking-Methoden und verwandte Artikel finden Sie auf der chinesischen PHP-Website!

Stellungnahme:
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