Heim > Artikel > Web-Frontend > Detaillierte Einführung in mit JavaScript entwickelte Webseiten, die mit verschiedenen Browsern kompatibel sind

Detaillierte Einführung in mit JavaScript entwickelte Webseiten, die mit verschiedenen Browsern kompatibel sind

黄舟Original: 2017-10-03 06:00:321294Durchsuche

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

Javascript-Entwicklungswebseiten kompatibel mit verschiedenen Browsern

Vorwort:

Es ist ein alltägliches Problem, dass CSS mit verschiedenen Browsern kompatibel ist. Es gibt überall im Internet Tutorials Nicht viel Neues, es ist eine rein persönliche Zusammenfassung, ich hoffe, es kann Anfängern etwas helfen.

1. CSS-HACK

Die folgenden beiden Methoden sind fast gleich. Kann alle heutigen HACKs lösen.

1, !important

Mit der Unterstützung von !important durch IE7 ist die !important-Methode jetzt nur für IE6s HACK verfügbar (Achten Sie auf die Schreiben. Denken Sie daran, dass die Deklarationsposition im Voraus erforderlich ist.)

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

2, IE6/IE77 für Firefox

*+html und *html sind keine IE-spezifischen Tags. *+html ist ein IE7-spezifisches Tag
Hinweis:

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

2. Universeller Schwimmerverschluss (sehr wichtig!)

Informationen zum Prinzip des Clear Float finden Sie unter [How To Clear Floats Without Structural Markup]

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

Fügen Sie den folgenden Code zu Global CSS hinzu und fügen Sie class="clearfix" zum erforderlichen p hinzu geschlossen. Es funktioniert jedes Mal.

3 Weitere Kompatibilitätstipps (noch einmal)

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

<style>


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

.clearfix {display:block;}


</style>

1). Stellen Sie die Zeilenhöhe auf die aktuelle Höhe ein und übergeben Sie den Inhalt nicht. 2). 0 auto; (Natürlich ist es nicht allmächtig)

3, falls erforderlich, um dem Inhalt im a-Tag Stil hinzuzufügen, müssen Sie display: block; (üblich in Navigations-Tags) festlegen 🎜>

4. Der Unterschied im BOX-Verständnis zwischen FF und IE führt zu einem Unterschied von 2 Pixeln und zu Problemen wie der Verdoppelung der Marge unter IE. Das ul-Tag hat standardmäßig den Listenstil und die Auffüllung unter FF. Es ist am besten, es im Voraus zu deklarieren (häufig in Navigations-Tags und Inhaltslisten)

6, Wie das externe Wrapper p, es ist am besten, Overflow: Hidden hinzuzufügen, um eine Höhenanpassung zu erreichen.

7, In Bezug auf den Handcursor: Zeiger .

P.S. Was IE5 und andere Browser betrifft, besteht keine Notwendigkeit, dies zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in mit JavaScript entwickelte Webseiten, die mit verschiedenen Browsern kompatibel sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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

Vorheriger Artikel：Beispiel für JavaScript, das eine Filterfunktion mit mehreren Bedingungen für Front-End-Daten implementiertNächster Artikel：Beispiel für JavaScript, das eine Filterfunktion mit mehreren Bedingungen für Front-End-Daten implementiert

In Verbindung stehende Artikel

Mehr sehen