Welche CSS IE-kompatiblen Schreibmethoden gibt es?

CSS ist ein sehr wichtiger Teil des Webdesigns, aber in verschiedenen Browsern ist die CSS-Kompatibilität 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 dem IE-Browser

Im IE-Browser sind häufige CSS-Kompatibilitätsprobleme wie folgt:

#🎜🎜 #

Box-Modell: IE6 und IE7 unterstützen das Standard-Box-Modell nicht, sondern verwenden das IE-Box-Modell. Dies führt zu einer Diskrepanz zwischen der tatsächlichen Breite und Höhe des Elements und der Designbreite und -höhe beim Festlegen von Breite und Höhe.
1. PNG24-Bildtransparenz: IE6 unterstützt die Transparenz von PNG24-Bildern nicht. Sie müssen JavaScript verwenden, um die Transparenz für IE6 separat festzulegen.
2. Float 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.
3. 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

Der Hintergrund des Bildes wird unter dem IE6-Browser nicht abgedeckt

Wenn in IE6 ein Element gleichzeitig ein Hintergrundbild und eine Hintergrundfarbe festlegt, wird das Hintergrundbild nicht von der Hintergrundfarbe abgedeckt. Zu diesem Zeitpunkt müssen Sie dem Containerelement ein _filter-Attribut hinzufügen und seinen Wert auf „erben“ setzen.

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

Der Rand wird im IE6-Browser nicht abgedeckt

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

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

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 unter IE6-Browser

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

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

.parent{
    padding-top:1px;    
}

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

Das Transparenzproblem von PNG24-Bildern unter IE6

Um die Transparenz von PNG24-Bildern in IE6 zu unterstützen, können Sie eine Ebene einfügen von div auf dem Bild und fügen Sie diesem div einen Teil des JavaScript-Codes hinzu.

HTML-Code:

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

CSS-Code:

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

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

Implementierung der festen Positionierung unter IE

Im IE-Browser kann das Attribut „position:fixed“ nicht unterstützt werden, aber eine ähnliche Funktionalität kann durch erreicht werden JavaScript-Effekt.

JavaScript-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();

Es sollte beachtet werden, dass DOCTYPE festgelegt werden sollte, wenn es mit IE7 und höheren Browsern kompatibel ist, andernfalls rendert IE die Seite in einem seltsamen Modus. und Kompatibilität können sexuelle Probleme auftreten.

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 vonWelche CSS IE-kompatiblen Schreibmethoden gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!