suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Beispiele für mit Javascript entwickelte Webseiten, die mit verschiedenen Browsern kompatibel sind

Detaillierte Beispiele für mit Javascript entwickelte Webseiten, die mit verschiedenen Browsern kompatibel sind

小云云
小云云Original
2017-12-27 10:02:021004Durchsuche

Es ist ein alltägliches Problem, dass CSS mit verschiedenen Browsern kompatibel ist. Im gesamten Internet werden in diesem Artikel die relevanten Informationen zu Webseiten vorgestellt, die mit verschiedenen Browsern kompatibel sind Persönliche Zusammenfassung), um allen zu helfen, eine solche Funktion zu meistern. Freunde, die sie benötigen, können darauf verweisen.

1. CSS-HACK

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

1, !important

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

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

2, IE6/IE77 für FireFox

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

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

Hinweis: 

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

2. Universeller Float-Verschluss (sehr wichtig!)

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

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

<style>


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

.clearfix {display:block;}


</style>

3 Kompatibilitätstipps (erneut)

1, FF Wenn Sie die Auffüllung auf p setzen, wird die Breite und Höhe erhöht, IE jedoch nicht (kann mit !important gelöst werden)

2 , Zentrierungsproblem.

1). Stellen Sie die Zeilenhöhe auf die gleiche Höhe wie das aktuelle p ein und verwenden Sie dann „vertikal-align: middle“. )
2). Horizontal zentriert: 0 auto; (Natürlich ist es nicht allmächtig)

3 Anzeige einstellen: block; (üblich in Navigations-Tags)

4. FF und IE verstehen BOX Der Unterschied führt zu einem Unterschied von 2px Es gibt auch Probleme, wie z. B. den auf Float gesetzten Spielraum Verdoppelung unter IE.

5, das UL-Tag hat standardmäßig den Listenstil und die Auffüllung unter FF. Es ist am besten, es im Voraus zu deklarieren, um unnötige Probleme zu vermeiden und Inhaltslisten)

6. Als externer Wrapper sollte p keine feste Höhe haben. Es ist am besten, overflow:hidden hinzuzufügen, um eine Höhenanpassung zu erreichen.

7, In Bezug auf den Handcursor: Und Hand gilt nur für IE.

P.S. Was IE5 und andere Browser betrifft, besteht keine Notwendigkeit, sich darum zu kümmern ist es nicht wert.

Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht oder gehen Sie zur Community dieser Website. Vielen Dank fürs Lesen Unterstützung dieser Seite!

Verwandte Empfehlungen:

Js-Code für die Musikwiedergabe implementieren, der mit verschiedenen Browsern kompatibel ist

Basierend auf JQuery, der mit verschiedenen kompatibel ist Browser iframe adaptive height script_jquery

JS-Webseitenwiedergabe-Sound-Implementierungscode, kompatibel mit verschiedenen Browsern_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für 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：Detaillierte Erläuterung des Filterselektors für jQuery-UnterelementeNächster Artikel：Detaillierte Erläuterung des Filterselektors für jQuery-Unterelemente

In Verbindung stehende Artikel

Mehr sehen