Kleine Details der Web-Frontend-Entwicklung
|
1 Das Select-Tag muss geschlossen sein <select></select> 2 Beim Layout links und rechts können Sie eine Seite schweben lassen, die Breite der schwebenden Seite festlegen und den Rand der anderen Seite auf die Breite der schwebenden Seite + den tatsächlichen Rand einstellen, wie unten gezeigt: .oben .oben_links{Breite:250px; Float:links; Höhe:500px;} .oben .oben_rechts{Höhe:500px; Rand links:260px;} Dies führt jedoch zu einem 3px-Fehler in IE6. Sie können einen Hack verwenden, nämlich *margin-left:257px; am besten lassen Sie .top_right auch schweben, damit der 3px-Fehler behoben wird, d. h. doppelter Float für die Breiteneinstellung 3 Wenn die Breite des Containers kleiner als die Breite des Inhalts eingestellt ist, wird er in modernen Browsern normal angezeigt, und der Inhalt, der die Breite überschreitet, kann weiterhin angezeigt werden, und der Container wird nicht erweitert. Dies ist jedoch in IE6 nicht der Fall, da die Breite in IE6 die Mindestbreite ist, sodass der Container gestreckt wird und die absolute relative Positionierung und der Rand basierend auf diesem Container Probleme verursachen. Die Lösung besteht darin, die Breite des Containers nicht festzulegen oder die Breite so einzustellen, dass sie größer oder gleich der maximalen Breite des Inhalts ist. 4 !important Der folgende Code: #a{margin-left:30px!wichtig; margin-left:20px;} Im obigen Beispiel beträgt der linke Rand der Ebene A in IE6.0 20 Pixel, während er in Firefox 30 Pixel beträgt. Dies liegt daran, dass !important in CSS Priorität bedeutet. Da der IE dieses Attribut nicht erkennen kann, kann im IE nur die Option „margin-left:20px;“ aufgerufen werden. Daher wird derselbe Code in Firefox und IE in unterschiedlichen Stilen angezeigt. 5 Kompatibilität-------3px-Fehler am unteren Rand des li-Elements in IE6/7 Wenn ein li in IE6 und 7 ein schwebendes Element enthält, hat das li einen zusätzlichen unteren Rand von 3 Pixeln. Es gibt zwei Lösungen: 1: Fügen Sie li ein Float-Attribut hinzu. Der Attributwert kann jeder beliebige Wert außer keinem sein. 2. Fügen Sie das Attribut „vertical-align“ zu li hinzu. Der Attributwert kann ein beliebiger Wert sein. In Bezug auf die Lösung des Problems gibt es zwischen diesen beiden Methoden keinen Unterschied. Beide Methoden stimulieren das Haslayout von li, indem entsprechende CSS-Attribute hinzugefügt werden. Methode 2 ist jedoch besser geeignet, um dieses Problem zu lösen, da Floating, sobald es zu li hinzugefügt wird, gelöscht werden muss. Dies ist ein kniffliges Problem. Obwohl es viele Möglichkeiten gibt, die durch Floating verursachten Probleme zu lösen, erhöht es unsichtbar die Belastung des Codes, was wir nicht sehen möchten, daher wird Methode 2 empfohlen. 6 Oft stößt man auf ein Layout, bei dem zwei Divs links und rechts gleich hoch sind. Beide Divs haben ihre Höhe festgelegt, aber die Höhe eines Divs wird in IE6 gestreckt. Das liegt daran, dass die in IE6 festgelegte Höhe der Mindesthöhe entspricht, während die in FF festgelegte Höhe der Mindesthöhe entspricht und daher von IE6 gestreckt wird. Die Lösung besteht darin, dem Div „overflow: hidden“ hinzuzufügen. |
<<: Detaillierte Erklärung der benutzerdefinierten Ereignisse von Vue-Komponenten
>>: Eine kurze Diskussion über das Design des Tomcat-Mehrschichtcontainers
Artikel empfehlen
Einführung in den Prozess zum Erstellen einer TCP-Verbindung im Linux-System
Inhaltsverzeichnis Schritte zum Erstellen von TCP...
So reduzieren Sie die Bildgröße mithilfe des mehrstufigen Docker-Builds
In diesem Artikel wird beschrieben, wie Sie die m...
Docker-Installations- und Konfigurationsschritte für RabbitMQ
Inhaltsverzeichnis Bereitstellung auf einem einze...
Bedeutung und Berechnungsmethode von QPS und TPS der MySQL-Datenbank
Bei DB-Benchmarktests sind QPS und TPS wichtige I...
Grafisches Tutorial zu MySQL-Downloads und Installationsdetails
1. Um die MySQL-Datenbank herunterzuladen, besuch...
Häufige Probleme und Lösungen beim Erstellen von MySQL MGR
Inhaltsverzeichnis 01 Häufige Fehler 1 02 Häufige...
Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden
Lassen Sie mich zunächst eine interessante Eigens...
So lassen Sie eine Remoteverbindung in MySql zu
So lassen Sie eine Remoteverbindung in MySql zu U...
Reiner CSS-freier Implementierungscode für Websites mit Umschaltfunktion für den Dunkelmodus
Vorwort Das Konzept des Dunkelmodus stammt ursprü...
Vereinfachen Sie die komplexe Website-Navigation
<br />Das Navigationsdesign stellt eine der ...
VUE realisiert Registrierungs- und Login-Effekte
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung des MySQL Shell import_table-Datenimports
Inhaltsverzeichnis 1. Einführung in import_table ...
Detaillierte Analyse des Blockierungsproblems von js und css
Inhaltsverzeichnis DOMContentLoaded und laden Was...
MySQL-Sortierung mittels Index-Scan
Inhaltsverzeichnis Installieren Sie Sakila Index-...
Eine kurze Diskussion zum Problem des Docker-Run-Containers im erstellten Status
Bei einem aktuellen Problem gibt es folgendes Phä...