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

Beheben einiger häufiger Probleme in CSS (Hack-Logo/fester Container/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

Artikel    

Artikel empfehlen

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.17 winx64

Aktuelle Erfahrungen mit der Installation der kos...

Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)

Wenn es um Tool-Websites geht, haben wir zunächst...

9 praktische Tipps zum Erstellen von Webinhaltsseiten

Inhalt 1. Geben Sie den Lesern einen Grund zu blei...

CSS-Rand halb oder teilweise sichtbarer Implementierungscode

1. Verwenden Sie Pseudoklassen, um die Hälfte des...

JS Asynchronous Stack Tracing: Warum „await“ besser ist als „Promise“

Überblick Der grundlegende Unterschied zwischen a...

Die Qualitäten und Fähigkeiten, die ein Webdesigner haben sollte

Webdesign ist eine aufstrebende Randbranche, die n...

Beispiel für die Konfiguration von nginx zur Implementierung von SSL

Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...

Centos7 implementiert Beispielcode zum Wiederherstellen von Daten basierend auf MySQL-Protokollen

Einführung Binlog-Protokolle, also binäre Protoko...

Detaillierte Erklärung des Unterschieds zwischen adaptiver und responsiver Analyse in der Umgangssprache

Basierend auf täglichen Entwicklungserfahrungen u...

Zusammenfassung eines CSS-Codes, der die gesamte Site grau macht

Um den Märtyrern und Opfern des Kampfes gegen die...

Der Unterschied zwischen z-index: 0 und z-index: auto in CSS

Ich habe vor Kurzem etwas über Stapelkontexte gel...

CSS Skills Collection – Klassiker unter den Klassikern

Entfernen Sie das gepunktete Kästchen auf dem Link...

mysql 5.7.18 winx64 Passwort ändern

Nachdem MySQL 5.7.18 erfolgreich installiert wurd...

Zusammenfassung der allgemeinen MySQL-Funktionen

Vorwort: Die MySQL-Datenbank bietet eine breite P...

Tutorial zur Installation und Konfiguration von MySQL 5.7.17 Zip. Lösung für MySQL-Startfehler.

MySQL 5.7.17, scheint jetzt die neueste Version z...