Warum verschwinden Divs mit fester Position und UL-Tags in Chrome und Opera?

Rendering-Problem bei Chrome und Opera mit fester Position und UL-Tag

Bestimmte Konfigurationen im HTML-Code können zu Rendering-Problemen in Google Chrome und Opera führen. Wenn ein Div mit fester Position ein Tag kann das Div beim Klicken auf Ankerlinks zeitweise verschwinden. Dieses Problem entsteht aufgrund eines internen Problems innerhalb der Rendering-Engine von Chrome.

Chrome-Lösung

In Chrome kann das Problem durch Hinzufügen von -webkit-transform: TranslateZ( 0) zum CSS-Stil für das Div mit fester Position:

#sidebar {
  -webkit-transform: translateZ(0); /* Fix for Chrome rendering issue */
}

Diese Technik zwingt Chrome dazu, eine 3D-Transformation am Div durchzuführen, was das zugrunde liegende Rendering-Problem zu lösen scheint.

Opera-Lösung

Opera handhabt das Problem anders als Chrome. Um das Problem in Opera zu lösen, müssen kontinuierlich Neuanstriche für eine Eigenschaft erzwungen werden, die sich potenziell auf das Layout auswirken können, in der Praxis jedoch keine Auswirkungen haben. In diesem Fall wird margin-bottom verwendet, da es das Seitenlayout wahrscheinlich nicht beeinträchtigt:

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
  animation: noop 1s infinite;
}

Dieser Code stellt sicher, dass Opera den unteren Rand der Seitenleiste kontinuierlich neu zeichnet und ihn so dazu zwingt, seine feste Position beizubehalten. Auch wenn diese Lösung nicht völlig fehlerfrei ist, minimiert sie das Flimmern und stellt das beabsichtigte Verhalten wieder her.

Es ist wichtig zu beachten, dass die Opera-Lösung keine universelle Lösung ist und möglicherweise Anpassungen basierend auf den spezifischen Positionierungsanforderungen des Geräts erfordert Element in Frage. Wenn dieses Problem auftritt, versuchen Sie, das vorgeschlagene CSS an Ihre Bedürfnisse anzupassen.

Das obige ist der detaillierte Inhalt vonWarum verschwinden Divs mit fester Position und UL-Tags in Chrome und Opera?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!