Welche CSS IE-kompatiblen Schreibmethoden gibt es?-Front-End-Fragen und Antworten-php.cn

Welche CSS IE-kompatiblen Schreibmethoden gibt es?

PHPz

Freigeben： 2023-04-24 09:49:22

Original

878 Leute haben es durchsucht

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:

#🎜🎜 #

PNG24-Bildtransparenz: IE6 unterstützt die Transparenz von PNG24-Bildern nicht. Sie müssen JavaScript verwenden, um die Transparenz für IE6 separat festzulegen.
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.
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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!