Heim > Artikel > Web-Frontend > Beispielanalyse von Browserkompatibilitätsproblemen
Beispielanalyse von Browserkompatibilitätsproblemen
- 零下一度Original
- 2017-06-30 11:08:011826Durchsuche
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>Der Code zeichnet einen Kreis in der Mitte von Flex-2, und Chrome verhält sich normal, wie in der Abbildung gezeigt
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!