CSS, dh kompatible Schreibmethode

CSS ist ein sehr wichtiger Teil des Webdesigns, aber die CSS-Kompatibilität in verschiedenen Browsern ist ein sehr problematisches Problem. Insbesondere im IE-Browser ist das Problem der CSS-Kompatibilität stärker ausgeprägt. Daher müssen Sie beim Schreiben von CSS-Stilen auf die Kompatibilität des IE-Browsers achten. In diesem Artikel werden einige häufig verwendete IE-kompatible Schreibmethoden vorgestellt.

1. Häufige Kompatibilitätsprobleme mit IE-Browsern

Im IE-Browser treten häufig folgende CSS-Kompatibilitätsprobleme auf:

1. Box-Modell: IE6 und IE7 unterstützen nicht das Standard-Box-Modell, sondern übernehmen das IE-Box-Modell Breite und Höhe des Elements müssen beim Festlegen von Breite und Höhe von der geplanten Breite und Höhe abweichen.
2. PNG24-Bildtransparenz: IE6 unterstützt die Transparenz von PNG24-Bildern nicht. Sie müssen JavaScript verwenden, um die Transparenz für IE6 separat festzulegen.
3. Floats löschen: IE6 unterstützt das automatische Löschen von Floats durch den Browser nicht. Sie müssen „clear:both“ verwenden, um Floats manuell zu löschen.
4. Positionierung: IE6 unterstützt position:fixed nicht, Sie können position:absolute verwenden, um den gleichen Effekt zu erzielen. 2. Häufig verwendete IE-Browser-kompatible Schreibmethoden Farbabdeckung nicht abgedeckt werden. Zu diesem Zeitpunkt müssen Sie dem Containerelement ein _filter-Attribut hinzufügen und seinen Wert auf „erben“ setzen.

<code>.container{
    background:url(images/bg.png) no-repeat;
    background-color:#fff;
    _filter: inherit;
}</code>

Der Rand wird im IE6-Browser nicht abgedeckt.

1. Wenn in IE6 zwei Blockelemente oder zwei Inline-Elemente aufeinandertreffen, wird der Rand nicht abgedeckt. Zu diesem Zeitpunkt können Sie dieses Problem lösen, indem Sie ein leeres Div festlegen.

<code><div class="box">
    <div class="inner"></div>
</div>

.box{
    background:#fff;
    border:1px solid #ccc;
    position:relative;
    zoom:1;
}
.inner{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}</code>

Der obige Code löst den hasLayout-Mechanismus des IE-Browsers aus, indem er position:relative und zoom:1 festlegt, und zeigt den Rahmen an, indem er ein leeres div-Element festlegt.

Randüberlappungsproblem im IE6-Browser

Wenn sich in IE6 der obere und der untere Rand zweier benachbarter Elemente überlappen, kommt es zu einer Randüberlappung. Zu diesem Zeitpunkt können Sie für das obige Element einen Abstandsrand festlegen, um Randüberlappungen zu vermeiden.

<code><div class="parent">
    <div class="children"></div>  
</div>

.parent{
    padding-top:1px;    
}

.children{
    margin-top:10px;
    height:50px;
    background:#ccc;
}</code>

Transparenzproblem von PNG24-Bildern unter IE6

3. Um die Transparenz von PNG24-Bildern in IE6 zu unterstützen, können Sie eine Div-Ebene auf das Bild legen und dem Div einen JavaScript-Code hinzufügen.

HTML-Code:

<code><div class="png">
    <img src="images/logo_bg.png" />
</div></code>

CSS-Code:

<code>div.png{
    position:relative;
    _behavior: expression(
        function( ele ){
            ele.innerHTML = '<span style="display:inline-block;width:' + ele.offsetWidth + 'px;height:' + ele.offsetHeight + 'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ ele.getElementsByTagName('img')[0].src + '\',sizingMethod=\'scale\')"></span>';
        }(this)
    );
}</code>

4. Im obigen Code kann das _behavior-Attribut JavaScript-Code an das Element binden und darin ausführen.

Implementierung der festen Positionierung unter IE

Im IE-Browser kann das Attribut position:fixed nicht unterstützt werden, aber ähnliche Effekte können über JavaScript erzielt werden.

JavaScript-Code:

<code>function fixedPosition() {
    var obj = document.getElementById("fixed_obj");
    var top = (document.documentElement.clientHeight - obj.offsetHeight) / 2 + document.documentElement.scrollTop;
    obj.style.top = top + "px";
}

window.onscroll = fixedPosition;

//初始时就调用一次以免刷新后没有滚动事件而没有效果
fixedPosition();</code>

Es ist zu beachten, dass DOCTYPE festgelegt werden sollte, wenn es mit IE7 und höheren Browsern kompatibel ist, da IE sonst die Seite in einem seltsamen Modus rendert und es zu Kompatibilitätsproblemen kommen kann.

5. Dieser Artikel fasst einige häufig verwendete CSS-IE-kompatible Schreibmethoden zusammen. Ich hoffe, dass er für alle hilfreich ist. In tatsächlichen Projekten sollten wir weiterhin bessere IE-kompatible Schreibmethoden zusammenfassen und erforschen, um die Kompatibilität und Benutzererfahrung von Webseiten zu verbessern.

Das obige ist der detaillierte Inhalt vonCSS, dh kompatible Schreibmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!