Ausführliche Erklärung von Javascript, um Webseiten mit verschiedenen Browsern kompatibel zu machen-js-Tutorial-php.cn

Ausführliche Erklärung von Javascript, um Webseiten mit verschiedenen Browsern kompatibel zu machen

小云云

Freigeben： 2018-01-29 17:24:07

Original

1663 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zu von JavaScript entwickelten Webseiten vorgestellt, die mit verschiedenen Browsern kompatibel sind. Hier finden Sie verschiedene Methoden, die Ihnen bei der Beherrschung solcher Funktionen helfen können.

Vorwort:

Es ist ein alltägliches Problem, dass es überall im Internet Tutorials gibt, die nicht allzu neu sind und lediglich eine persönliche Zusammenfassung darstellen Ich hoffe, es ist hilfreich für Anfänger.

1. CSS-HACK

Die folgenden zwei Methoden können heute fast alle HACKs lösen.

1, !wichtig

Mit der Unterstützung von !important durch IE7 ist die !important-Methode jetzt nur noch für den HACK von IE6 verfügbar. (Achten Sie auf die Schreibweise. Denken Sie daran, dass die Deklarationsposition im Voraus erfolgen muss.)

<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>

Nach dem Login kopieren

2, IE6 /IE77 für Firefox

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

<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>

Nach dem Login kopieren

Hinweis:

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

Nach dem Login kopieren

2. Universeller Schwimmerverschluss (sehr wichtig!)

Informationen zum Prinzip des klaren Schwimmers finden Sie unter [So löschen Sie Floats ohne strukturelles Markup]

Fügen Sie den folgenden Code zum globalen CSS hinzu und fügen Sie class="clearfix" zum p hinzu, das geschlossen werden muss.

<style>


.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}

.clearfix {display:block;}


</style>

Nach dem Login kopieren

3. Weitere Kompatibilitätstipps (erneut)

1. Das Festlegen der Auffüllung auf p unter FF führt zu einer Vergrößerung der Breite und Höhe, IE jedoch nicht (kann mit gelöst werden). !wichtig)

2. Zentrierungsproblem.

1). Ausrichten: Mitte. (Achten Sie darauf, den Inhalt nicht umzubrechen.)
2). Stile für den Inhalt im a-Tag müssen Sie display: block; festlegen (üblich in Navigations-Tags)

4 Der Unterschied im Verständnis von BOX zwischen FF und IE führt zu einem Unterschied von 2 Pixeln . Es gibt auch Probleme wie die Verdoppelung des Randes von p, der im IE auf float eingestellt ist. Es ist am besten, ihn unter FF zu deklarieren im Voraus, um unnötigen Ärger zu vermeiden.

6 Als externer Wrapper ist es am besten, „On overflow: versteckt“ hinzuzufügen. um eine hohe Anpassungsfähigkeit zu erreichen.

7, über den Handcursor: Und die Hand gilt nur für IE.

P.S. Für IE5 und andere Browser besteht keine Notwendigkeit sich um beides zu kümmern.

Verwandte Empfehlungen:

div ＋ CSS-Design, wie Sie Ihre Webseite mit verschiedenen Browsern kompatibel machen_ html /css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von Javascript, um Webseiten mit verschiedenen Browsern kompatibel zu machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!