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

Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen

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

Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen

Beispiel für die Verwendung eines manipulationssicheren JavaScript-Objekts

Mehrere häufig verwendete Single-Page-Anwendungswebsite-Sharing

Lösen Sie das Problem, dass await in forEach nicht funktioniert

VMware15/16 Detaillierte Schritte zum Entsperren von VMware und Installieren von MacOS

So beschränken Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen

Webdesign-Tipps für Formular-Eingabefelder

Beispiel für die Implementierung eines 16:9-Rechtecks mit adaptiver Breite und Höhe mithilfe von CSS

Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren

Prozessdiagramm für das erste Bereitstellungs-Webprojekt von Tomcat

Artikel empfehlen

So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue

Detaillierte Erläuterung des direkten Routings bei der hostübergreifenden Kommunikation von Docker-Containern

Tutorial zur Installation von PHP auf CentOS über Yum

So erfassen Sie Ausnahmen in React

So passen Sie mit CSS einen schöneren Link-Prompt-Effekt an

Detaillierte Erklärung des Fehlers bei der Verwendung des Element-ui NavMenu-Untermenüs zur rekursiven Generierung

So implementieren Sie Leerzeichen in Taobao mit CSS3

Vue verwendet berechnete Eigenschaften, um die Erstellung dynamischer Schieberegler abzuschließen

Tutorial zum Erstellen des File-Sharing-Dienstes Samba unter CentOS6.5

Vue-Tutorial zur erweiterten Verwendung dynamischer Komponenten

CSS-Implementierungscode zum Zeichnen von Dreiecken (Rahmenmethode)

Gründe und Lösungen für das Nicht-Wirksamwerden der MySQL-SQL-Modus-Änderung

Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung

Sekundäre Kapselung des Elements el-table table (mit Tischhöhenanpassung)

Lernen Sie die wichtigsten Kenntnisse, die im Vue-Framework beherrscht werden müssen