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:02941Durchsuche
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
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!