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
HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil
Erster Blick auf die Wirkung: Vorwort: Auf diese ...
MySQL-Grundlagen - Kurzanleitung - Wissenszusammenfassung (mit Mindmap)
Inhaltsverzeichnis Vorwort 1. Grundkenntnisse der...
So kompilieren und installieren Sie PHP und Nginx in einer Ubuntu-Umgebung
Dieser Artikel beschreibt, wie man PHP und Nginx ...
Grafisches Tutorial zur Installation und Aktivierung von VMware Workstation 14 Pro
In diesem Artikel erfahren Sie alles über die Ins...
Apple Mac OS X in VMWare12 installieren – Grafik-Tutorial
1. Einleitung: Da mein Freund einige Systemkenntn...
5 Schritte zur Implementierung der Responsive Webdesign-Methode und zum Abschied vom Wasserfallmodell (Grafik-Tutorial)
Herzlichen Glückwunsch, dass Sie Ihren Chef endli...
Detaillierte Erklärung der Firewall-Regeleinstellungen und Befehle (Whitelist-Einstellungen)
1. Firewall-Regeln festlegen Beispiel 1: Port 808...
Tiefgreifendes Verständnis der verschiedenen Sperren von MySQL
Inhaltsverzeichnis Schlossübersicht Sperrklassifi...
So legen Sie eine statische IP für den Ubuntu 18.04-Server fest
1. Hintergrund Netplan ist ein neues Befehlszeile...
Eine kurze Einführung in Linux-Leistungsüberwachungsbefehle kostenlos
Wie können wir den Fehler lokalisieren, wenn im S...
CSS3-Filtercode zum Erreichen des Grau- oder Schwarzmodus auf Webseiten
Frontend css3.filter kann nicht nur den Graueffek...
Ein Artikel zum Verständnis von Operatoren in ECMAScript
Inhaltsverzeichnis Unäre Operatoren Boolesche Ope...
So erstellen Sie LVM für das XFS-Dateisystem in Ubuntu
Vorwort Die logische Datenträgerverwaltung von lv...
Tipps zur Kurzschrift in JavaScript
Inhaltsverzeichnis 1. Arrays zusammenführen 2. Ar...
Praxis der mehrschichtigen verschachtelten Anzeige von Elementtabellen
Es wird eine Liste mit mehreren Bestellungen benö...