Beispielanalyse von Browserkompatibilitätsproblemen
Kompatibilitätsprobleme sind ein wichtiger Teil des Frontends.
Unter den inländischen Browsern sind die meisten Dual-Core-Browser wie 360 Browser und QQ Browser. Der Dual-Core-Browser verfügt über zwei Kerne: einen IE-kompatiblen Kern und einen Nicht-IE-Geschwindigkeitskern, die dem Kompatibilitätsmodus bzw. dem Geschwindigkeitsmodus entsprechen. Der Kompatibilitätsmodus verwendet den IE-Kernel und der Extremgeschwindigkeitsmodus verwendet den Webkit-Kernel. Derzeit verwenden die meisten Websites aus Gründen der Leistung und des Benutzererlebnisses standardmäßig den Extremgeschwindigkeitsmodus. Verwenden Sie den Kompatibilitätsmodus, wenn im Extremgeschwindigkeitsmodus Probleme auftreten.
Obwohl der Extremgeschwindigkeitsmodus den Webkit-Kernel verwendet, gibt es dennoch gewisse Unterschiede in der Browserleistung. Normalerweise verwende ich Chrome zum Debuggen, aber im Extremgeschwindigkeitsmodus verhält es sich ungewöhnlich.
Okay, kommen wir zum Punkt. Flex ist ein sehr gutes Attribut im aktuellen Frontend-Layout. Ich werde hier nicht auf Details eingehen. Sie können die Einführung des Masters lesen mit relativer Positionierung:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Test</title><style>html,body{margin:0;padding:0;width: 100%;height: 100%;}
.wrapper{position: relative;width: 100%;height: 100%;background-color: #fff;display: flex;flex-direction: column;}
.flex-1{flex: 0 0 200px;background-color: #dfdfdf;}.flex-2{flex: 1;}.circle{position: relative;
left: 50%;top: 50%;margin: -100px 0 0 -100px;width: 200px;height: 200px;border-radius: 100px;background-color: #52caff;}</style></head><body><div class="wrapper"><div class="flex-1"></div><div class="flex-2"><div class="circle"></div></div></div></body></html>
Aber bei 360°-Geschwindigkeit sieht es so aus:
Nach der Suche nach dem Grund werden die relativen Positionen der Kreise in vertikaler Richtung nicht wirksam, das heißt: „oben:50 %“ funktioniert nicht. Warum funktioniert es nicht? Ich denke, das liegt daran, dass div.flex-1 die Höhe nicht explizit schreibt, „flex:0 0 500px“. Es ist die Abkürzung des Flex-Attributs,
Dies wird durch Ändern der Schreibmethode erreicht:
CSS3 calc() verwenden? In diesem Fall besteht keine Notwendigkeit, Flex zu verwenden, wenn der Flex-Teilbereich relativ positioniert ist. Obwohl die aufgetretenen Probleme gelöst wurden, scheinen neue Probleme aufgetreten zu sein.
Warum verhalten sich inländische Browser im Kompatibilitätsmodus anders? . . . . . . . . . . . .
Das obige ist der detaillierte Inhalt vonBeispielanalyse von Browserkompatibilitätsproblemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Was ist Apache Server? Wofür ist Apache Server?
Apr 13, 2025 am 11:57 AM
Apache Server ist eine leistungsstarke Webserver -Software, die als Brücke zwischen Browsern und Website -Servern fungiert. 1. Es werden HTTP -Anforderungen behandelt und Webseiteninhalte basierend auf Anfragen zurückgegeben. 2. Modulares Design ermöglicht erweiterte Funktionen, wie die Unterstützung für die SSL -Verschlüsselung und dynamische Webseiten. 3. Konfigurationsdateien (z. B. virtuelle Host-Konfigurationen) müssen sorgfältig eingestellt werden, um Sicherheitsanfälligkeiten zu vermeiden und Leistungsparameter wie Thread-Zähler und Zeitüberschreitungszeit zu optimieren, um leistungsstarke und sichere Webanwendungen zu erstellen.
Tipps zur Verwendung von HDFS -Dateisystem auf CentOS
Apr 14, 2025 pm 07:30 PM
Das Installations-, Konfigurations- und Optimierungshandbuch für das HDFS -Dateisystem unter CentOS -System In diesem Artikel wird die Installation, Konfiguration und Optimierung von Hadoop Distributed Dateisystem (HDFS) auf CentOS -System geleitet. HDFS -Installation und Konfiguration Java -Umgebung Installation: Stellen Sie zunächst sicher, dass die entsprechende Java -Umgebung installiert ist. Bearbeiten/etc/Profildatei, Folgendes hinzufügen und /usr/lib/java-1.8.0/jdk1.8.0_144 mit Ihrem tatsächlichen Java-Installationspfad: exportjava_home =/usr/lib/java-1.8.0/jdk1.8.0_144144141441444 = $ java-1.8.0/Jdk1.8.0_144444 = $ Java-1. Java-1 $ Java-1.8.8.0_14444, ersetzen
Lösen
Apr 18, 2025 am 09:24 AM
Bei der Entwicklung von Websites mit CraftCMS stoßen Sie häufig mit Ressourcendateiproblemen, insbesondere wenn Sie häufig CSS und JavaScript -Dateien aktualisieren, alte Versionen von Dateien möglicherweise weiterhin vom Browser zwischengespeichert. Dieses Problem wirkt sich nicht nur auf die Benutzererfahrung aus, sondern erhöht auch die Schwierigkeit der Entwicklung und des Debuggens. Kürzlich habe ich in meinem Projekt ähnliche Probleme gestoßen, und nach einigen Erkundungen fand ich das Plugin Wiejeben/Craft-Laravel-Mix, das mein Caching-Problem perfekt löste.
NGINX -Leistungsüberwachung und Fehlerbehebungstools
Apr 13, 2025 pm 10:00 PM
Die Überwachung und Fehlerbehebung von Nginx-Leistungen werden hauptsächlich in den folgenden Schritten durchgeführt: 1. Verwenden Sie Nginx-V, um Versionsinformationen anzuzeigen und das Modul von stub_status zu aktivieren, um die Anzahl der aktiven Verbindungen, Anforderungen und Cache-Trefferzahlen zu überwachen. 2. Verwenden Sie den Top -Befehl, um den Aufbau von Systemressourcen, Iostat und VMSTAT -Monitor -Disk -I/A bzw. Speicherverbrauch zu überwachen. 3.. Verwenden Sie TCPDump, um Pakete zu erfassen, um den Netzwerkverkehr zu analysieren und Probleme mit der Netzwerkverbindung zu beheben. 4. Konfigurieren Sie die Anzahl der Arbeitsprozesse ordnungsgemäß, um unzureichende gleichzeitige Verarbeitungsfunktionen oder übermäßige Prozesskontextschaltaufwand zu vermeiden. 5. Konfigurieren Sie den Nginx -Cache korrekt, um unsachgemäße Einstellungen für die Größengröße zu vermeiden. 6. Durch Analyse von Nginx -Protokollen, z. B. die Verwendung von awk- und grep -Befehlen oder Elch
So konfigurieren Sie den HTTPS -Server in Debian OpenSSL
Apr 13, 2025 am 11:03 AM
Das Konfigurieren eines HTTPS -Servers auf einem Debian -System umfasst mehrere Schritte, einschließlich der Installation der erforderlichen Software, der Generierung eines SSL -Zertifikats und der Konfiguration eines Webservers (z. B. Apache oder NGINX) für die Verwendung eines SSL -Zertifikats. Hier ist eine grundlegende Anleitung unter der Annahme, dass Sie einen Apacheweb -Server verwenden. 1. Installieren Sie zuerst die erforderliche Software, stellen Sie sicher, dass Ihr System auf dem neuesten Stand ist, und installieren Sie Apache und OpenSSL: sudoaptupdatesudoaptupgradesudoaptinsta
So überwachen Sie den HDFS -Status auf CentOs
Apr 14, 2025 pm 07:33 PM
Es gibt viele Möglichkeiten, den Status von HDFs (Hadoop Distributed Dateisystem) auf CentOS -Systemen zu überwachen. In diesem Artikel werden mehrere häufig verwendete Methoden eingeführt, mit denen Sie die am besten geeignete Lösung auswählen können. 1. Verwenden Sie Hadoops eigenes Webui, Hadoops eigene Weboberfläche, um die Überwachungsfunktion der Cluster -Status zu ermöglichen. Schritte: Stellen Sie sicher, dass der Hadoop -Cluster in Betrieb ist. Greifen Sie in Ihrem Browser auf das Webui zu: Geben Sie http: //: 50070 (Hadoop2.x) oder http: //: 9870 (Hadoop3.x) ein. Der Standard -Benutzername und das Passwort sind normalerweise HDFS/HDFs. 2. Die Überwachung des Befehlszeilenwerkzeugs Hadoop bietet eine Reihe von Befehlszeilen -Tools, um die Überwachung zu erleichtern
Installation und Schnellkonfigurationshandbuch für NGINX -Server
Apr 13, 2025 pm 10:18 PM
In diesem Artikel werden die Konstruktions- und Konfigurationsmethoden von Nginx eingeführt. 1. Installieren Sie Nginx: Verwenden Sie Sudoyumininstallnginx auf CentOS, verwenden Sie Sudoapt-Getinstallnginx auf Ubuntu und beginnen Sie mit dem SudosystemCTLStartNginx nach der Installation. 2. Grundlegende Konfiguration: Ändern Sie die Datei /etc/nginx/nginx.conf, ändern Sie hauptsächlich die Anweisungen zum Hören (Port) und Root (Site Root Directory) im Serverblock und verwenden Sie nach der Änderung sudosystemctlrestartNginx, um neu zu starten und wirksam zu werden. 3.. Virtuelle Hostkonfiguration: In nginx.co
So sehen Sie den Thread -Status im Tomcat -Protokoll an
Apr 13, 2025 am 08:36 AM
Um den Thread -Status im Tomcat -Protokoll anzuzeigen, können Sie die folgenden Methoden verwenden: TomcatmanagerWEB -Schnittstelle: Geben Sie die Verwaltungsadresse von Tomcat (normalerweise http: // localhost: 8080/Manager) in den Browser -Browser an, und Sie können den Status des Thread -Pools nach der Logging in. Tomcat's Thread Pool. Wählen Sie in JConsole
