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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Randüberlappungsproblem im IE6-Browser

<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.

<code><div class="png">
    <img src="images/logo_bg.png" />
</div></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>

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

Implementierung der festen Positionierung unter IE

<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>

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!