CSS-Browser-kompatible Lösung_CSS/HTML

1. Der Hintergrund der Webseite ist halbtransparent
Der Hintergrund der Webseite ist halbtransparent

Kopie der Code Der Code lautet wie folgt:

opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; CSS-Methode in IE6 zur Lösung des Transluzenzproblems von PNG-Bildern:
#DIVname {
width: 300px;
height: 99px;
background: url('images/top.png') no- wiederholen top;
*background: none;
*filter:progid :DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='template/flower/images/top.png' );
}

2. Floating löschen

Code kopieren Der Code lautet wie folgt:

.clearfix:after{ content:"."; clear:both:hidden; :inline-block🎜>.clear{height:0; 1 %; 🎜>2. 3px-Abstandsfehler unter IE6: Wenn in IE6 Text (oder keine schwebenden Elemente) nach einem schwebenden Element vorhanden ist, entsteht eine zusätzliche 3px-Lücke zwischen dem Text und dem schwebenden Element. Fügen Sie display:inline hinzu oder entwerfen Sie einen -3px Lücke zur schwebenden Ebene, um diesen Fehler zu beheben.
3-Pixel-Abstandsfehler
Mindesthöhe min-height in div+css
Methode 1:

Code kopieren

Der Code lautet wie folgt:


#DIVname {
min-height:150px;

*height:auto!important; _height:150px; overflow: sichtbar;}Methode 2:

Kopieren Sie den Code


Der Code lautet wie folgt :

#DIVname {
min-height:1000px;

_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px" :"");} 5. Z-Index-Fehler unter IE

Im Allgemeinen stellt der IE höhere Anforderungen an das übergeordnete Element. Wenn das übergeordnete Element ein Positionsattribut hat, aber kein Z-Index-Attribut angibt, gilt: Der Standardwert ist 0. Unabhängig davon, wie hoch das Z-Index-Attribut in der Teilmenge ist, ist es nutzlos.
Im Allgemeinen müssen Sie dem übergeordneten Element, das das Z-Index-Attribut enthält, ein Z-Index:1-Attribut zuweisen, wodurch viele unerklärliche Probleme gelöst werden können.

6. Fehler bei der Größenänderung des IE6-Fensters

Wenn der Körper in der Mitte platziert und die Größe des IE-Browsers geändert wird, werden alle relativ positionierten Elemente im Körper behoben soll position:relative; für den Körper definieren.

7. Textgröße und Zeilenhöhe sind nicht kompatibel

Für die gleiche Schriftart derselben Größe sind die Zeilenhöhe und -größe in jedem Browser unterschiedlich, daher muss die Zeilenhöhe eingestellt werden .
8. Spiegelrandfehler

Wenn unter IE6 ein Float-Element im äußeren Element vorhanden ist und das äußere Element „margin-top:5px“ definiert, wird „margin-bottom:5px“ automatisch verwendet generiert, treten ähnliche Probleme auch beim Auffüllen auf. Die Lösung besteht darin, einen Rand oder einen Gleitkomma auf dem äußeren Element festzulegen.
9. Der Leerraum unter img
In HTML gibt es:

, Sie werden feststellen, dass sich der untere Rand des Bildes nicht in der Nähe des unteren Randes des Containers befindet, was durch die Leerzeichen nach img verursacht wird. Um dies zu beseitigen, müssen Sie schreiben so:

Die folgenden beiden Tags sollten nebeneinander liegen. Dieser Fehler besteht immer noch unter IE7, die Lösung lautet: display:block.
10. Bilder und Text gehen Hand in Hand
Jeder weiß, dass die Ausrichtung von Bild oben, in der Mitte, in der Mitte usw. umfasst. Sie können versuchen, Bild und Text anzupassen Sie werden unter IE und FF ausgerichtet. Wenn Sie konsistent sein können, werden Sie feststellen, dass Sie nicht zufrieden sein werden, egal wie Sie es anpassen. Lassen Sie Bild und Text einfach schweben und passen Sie sie mit dem Rand an.
Zeilenhöhe verloren.

Text

Leider verschwindet der Zeilenhöheneffekt einer einzelnen Textzeile in IE6. . . Der Grund dafür ist, dass das Inline-Block-Element und das Inline-Element zusammen geschrieben werden. Lösung: Lassen Sie sowohl das Bild als auch den Text schweben.