vertikale Zentrierung von Bildern)

1. IE-Browsermodus Hack-Logo
1. CSS-Hack-Logo

Code kopieren

Der Code lautet wie folgt:

ie6 { _Eigenschaft: Wert; }
ie7 { +Eigenschaft: Wert; }
ie9 { Eigenschaft: Wert\9\0; }
lte ie7 { *Eigenschaft: Wert; }
gte ie8 { Eigenschaft: Wert\0; }
alle ie { Eigenschaft: Wert\9; }
/*Hinweis: Es wird nicht empfohlen, Hack zu verwenden, es sei denn, es ist unbedingt erforderlich. Wenn Sie das Hack-Flag verwenden, müssen Sie jeden Browser testen (einschließlich des neuen IE-Browsers)*/

2. Hack-Logo für die IE-Browserumgebung
2.1. Alle IE-Browser

Code kopieren

Der Code lautet wie folgt:

<!--[wenn IE]>
<script>alarm('dh');</script>
<![Ende]

2.2. Nicht-IE-Browser

Code kopieren

Der Code lautet wie folgt:

<!--[wenn !IE]>
<script>alarm('!ie');</script>
<![Ende]

2.3. Einzelne IE-Version

Code kopieren

Der Code lautet wie folgt:

<!--[wenn IE-Versionsnummer]>
<script>alert('dh Versionsnummer');</script>
<![Ende]

2.4. Größer oder gleich der IE-Versionsnummer

Code kopieren

Der Code lautet wie folgt:

<!--[wenn gte IE-Versionsnummer]>
<script>alert('gte IE-Versionsnummer');</script>
<![Ende]

2.5, kleiner oder gleich der IE-Versionsnummer

Code kopieren

Der Code lautet wie folgt:

<!--[wenn LTE IE-Versionsnummer]>
<script>alert('lte IE-Versionsnummer');</script>
<![Ende]

2. Einige häufige Probleme im Code
1. Einige Probleme, die bei der Verwendung des Float-Layouts beachtet werden sollten
1.1. Bei Verwendung des Float-Layouts in IE6 treten doppelte Ränder auf. Die Lösung besteht darin, die Anzeige auf Inline einzustellen.
1.2. Nach der Verwendung von Float (oder absoluter Positionierung) wird ein Inline-Element automatisch zu einem Blockelement. Sie können die Breite und Höhe direkt festlegen, ohne display: block festzulegen.
1.3. Wenn in IE7 mehrere Zeilen mit Elementen mit float: left; margin-bottom: 20px; vorhanden sind, ist der äußere untere Rand der letzten Zeile mit Elementen ungültig.
1.4. Wenn in IE6 und 7 die Listenelemente ul und ol Float-Layout verwenden, gibt es links und neben dem Inhalt mehrere Pixel Leerraum. Die Lösung besteht darin, den Listenstil auf „außen“ einzustellen.
1.5. Wenn das übergeordnete Element eines untergeordneten Elements ein Float-Layout verwendet, löschen Sie das schwebende CSS-Pseudoelement danach und fügen Sie „zoom: 1“ hinzu, um das Problem zu lösen.
2. Das Zeilenhöhenattribut ist ungültig. Der in CSS festgelegte Zeilenhöhenattributwert ist in IE9 ungültig. Dieses Problem wird hauptsächlich durch die Schriftart verursacht. Sie können die Schriftart auf Songti oder Microsoft Yahei einstellen.
3. Das Overflow-Attribut ist in IE6 und 7 ungültig. Wenn das untergeordnete Element relativ positioniert ist, wird der Overflow des übergeordneten Elements auf „hidden“ gesetzt; er ist ungültig. Die Lösung besteht darin, das übergeordnete Element ebenfalls auf „relativ positioniert“ zu setzen.
4. Nachdem die Unterelemente im li-Element schweben, weist das li-Element eine Lücke von mehreren Pixeln nach oben (ähnlich wie padding-top) oder nach unten (ähnlich wie margin-top) auf. Beispiel: Die vertikal angeordneten li-Elemente weisen eine Lücke von mehreren Pixeln nach unten auf.

Code kopieren

Der Code lautet wie folgt:

Code anzeigen
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>Fehler, die durch schwebende Unterelemente in der Liste li verursacht werden</title>
<Stil>
/*Globale Stile*/
Body, Div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, Pre, Code, Formular, Feldsatz, Legende, Eingabe, Textbereich, p, Blockzitat, th, td, hr, Schaltfläche, Artikel, beiseite, Details, Figcaption, Abbildung, Fußzeile, Kopfzeile, H-Gruppe, Menü, Navigation, Abschnitt { Rand: 0; Polsterung: 0; }
Textkörper, Schaltfläche, Eingabe, Auswahl, Textbereich { Schriftart: 12px/1,5 Arial, „Microsoft Yahei“, „微软雅黑E\8F6F\96C5\9ED1“; }
ul { Listenstil: keine; }
img { Grenze: keine; }
/* Klarer schwebender Stil */
.clear-fix:after { Inhalt: '.'; Anzeige: Block; Höhe: 0; Sichtbarkeit: verborgen; Löschen: beides; }
.clear-fix: { zoom: 1; }
Körper { Hintergrundfarbe: #F00; }
.module { Breite: 200px; Höhe: 300px; Rahmen: 1px durchgezogen #FFF; Rand: 100px automatisch; }
.module ul { Breite: 100%; Hintergrundfarbe: #093; }
.module li { Breite: 100 %; Hintergrundfarbe: #CCC; }
.module li span { float: links; Anzeige: inline; Textausrichtung: Mitte; Breite: 50 %; Zeilenhöhe: 60px; }
</Stil>
</Kopf>
<Text>
<div Klasse="Modul">
<ul>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
</ul>
</div>
</body>
</html>

Wie in der Abbildung dargestellt: Anzeige in IE6 und 7

3. Containerbild vertikal zentriert

Code kopieren

Der Code lautet wie folgt:

Code anzeigen
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="gb2312" />
<title>Demo zum vertikalen Zentrieren eines Bildes</title>
</Kopf>
<Stil>
/*Globale Stile*/
Body, Div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, Pre, Code, Formular, Feldsatz, Legende, Eingabe, Textbereich, p, Blockzitat, th, td, hr, Schaltfläche, Artikel, beiseite, Details, Figcaption, Abbildung, Fußzeile, Kopfzeile, H-Gruppe, Menü, Navigation, Abschnitt { Rand: 0; Polsterung: 0; }
Textkörper, Schaltfläche, Eingabe, Auswahl, Textbereich { Schriftart: 12px/1,5 Arial, „Microsoft Yahei“, „微软雅黑E\8F6F\96C5\9ED1“; }
ul { Listenstil: keine; }
img { Grenze: keine; }
/* Klarer schwebender Stil */
.clear-fix:after { Inhalt: '.'; Anzeige: Block; Höhe: 0; Sichtbarkeit: verborgen; Löschen: beides; }
.clear-fix: { zoom: 1; }
.box { Breite: 800px; Rand: 100px auto; }
.Bild-Wrap {
Breite: 220px;
Höhe: 220px;
Rand: 1px durchgezogen #F00;
/*Standard-Browsersimulationstabellenzentrierung*/
Anzeige: Tabellenzelle;
vertikale Ausrichtung: Mitte;
Textausrichtung: zentriert;
/*Verhindern Sie, dass sich der Container aufgrund der Schriftart und Zeilenhöhe ausdehnt*/
Schriftgröße: 0;
Zeilenhöhe: 1;
*Anzeige: Block;
+Zeilenhöhe: 220px;
_font-size: 192px; /* Schriftgröße entspricht Höhe/1,14 */
_Schriftfamilie: serifenlos;
}
.pic-wrap img {
Anzeige: inline; /*Das Bild muss ein Inline-Element sein*/
vertikale Ausrichtung: Mitte;
}
</Stil>
<Text>
<div Klasse="Box">
<a href="" Klasse="pic-wrap" Ziel="_blank">
<img src="http://img01.taobaocdn.com/tps/i1/T1LZ.8XdVcXXcb7DQt-185-205.jpg" alt="Quelle xxx" title="Quelle xxx">
</a>
</div>
</body>
</html>

Wie in der Abbildung gezeigt: Es werden drei verschiedene Bildgrößen angezeigt. Hier überschreitet das Bild nicht die Größe des übergeordneten Elementcontainers des Bildes (manchmal kann der Entwickler die maximale Größe des Ausgabedatenbildes steuern und das Bild wird automatisch proportional skaliert).

<<: Prometheus überwacht MySQL mithilfe der Grafana-Anzeige

>>: Reines CSS, um nach Auswahl des Produkts das Zeichen √ in der unteren rechten Ecke anzuzeigen

Zen Coding Einfaches und schnelles HTML-Schreiben

Beheben einiger häufiger Probleme in CSS (Hack-Logo/fester Container/vertikale Zentrierung von Bildern)

Zen Coding Einfaches und schnelles HTML-Schreiben

Das Problem, dass Formularelemente und Eingabeaufforderungstext nicht ausgerichtet sind

MySQL-Cursor-Prinzip und Analyse von Anwendungsbeispielen

Vergleich der Leistung von int, char und varchar in MySQL

Navicat-Verbindung MySQL Fehlerbeschreibungsanalyse

Grundlegende Verwendung und Beispiele von yum (empfohlen)

Detailliertes Tutorial zum Bereitstellen eines SpringBoot + Vue-Projekts auf einem Linux-Server

Tutorial zur grafischen Installation der MySQL 8.0.15 WinX64-Dekomprimierungsversion

Einführung in den Unterschied zwischen On- und Where-Bedingungen in der MySQL-Left-Join-Operation

Detaillierte Erläuterung der Anwendungsbereitstellungspraxis für Docker + Jenkins + Gitlab + Django

Artikel empfehlen

Erste Schritte: Eine kurze Einführung in die grundlegenden Tags und Attribute von HTML

Die spezifische Verwendung und der Unterschied zwischen Attribut und Eigenschaft in Vue

Lösung zum Importieren weiterer Daten aus MySQL in Hive

Zusammenfassung der MySQL-Anweisungen

Vue integriert Tencent Map zur Implementierung der API (mit DEMO)

Grundlagen der funktionalen Programmierung in JavaScript

Implementierungsbeispiel eines Videoplayers basierend auf Vue

So implementieren Sie eine geplante Sicherung von MySQL unter Linux

Detailliertes Tutorial zur Installation und Konfiguration der komprimierten Version der MySQL-Datenbank

Detaillierte Erläuterung gängiger Vorgänge für Docker-Images und -Container

So verwenden Sie das JQuery-Editor-Plugin tinyMCE

Zusammenfassung von 4 Möglichkeiten zum Hinzufügen von Benutzern zu Gruppen in Linux

Detailliertes Tutorial zur Installation der virtuellen Python 3-Umgebung in Ubuntu 20.04

Detaillierte Erklärung des Linux Namespace-Benutzers

K3s-Erste-Schritte-Handbuch - Detailliertes Tutorial zum Ausführen von K3s in Docker