So stellen Sie sicher, dass CSS3 unterstützt wird

So stellen Sie sicher, dass IE CSS3 unterstützt: 1. Laden Sie „ie-css3.htc“ herunter und legen Sie es zur Verwendung im Serververzeichnis ab. 2. Laden Sie die Datei „css3 PIE.htc“ herunter und laden Sie dann „PIE.htc“ hoch. Datei in das mittlere Website-Verzeichnis kopieren.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.

Methode 1: Verwenden Sie ie-css3.htc

ie-css3.htc ist eine HTC-Datei, die es dem IE-Browser ermöglicht, einige CSS3-Attribute zu unterstützen, nicht nur Box-Shadow, sondern Ihrem IE-Browser auch die Unterstützung der abgerundeten Ecke ermöglichen kann Attribut border-radius und das Textschattenattribut text-shadow.

So verwenden Sie es: Laden Sie es herunter und legen Sie es in Ihrem Serververzeichnis ab.

Schreiben Sie den folgenden Code in Ihren

<!--[if IE]>
<style type="text/css">img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->

Methode 2: CSS3-Pie-Plugin verwenden

CSS3-Pie ist Ein Plug-In, das es dem IE-Browser ermöglicht, einige CSS3-Attribute zu unterstützen.

Offizielle Website: http://css3pie.com/

[Empfohlenes Lernen: CSS-Video-Tutorial]

Verwendung:

Schritt 1: Laden Sie die css3 PIE.htc-Datei herunter

Schritt 2: Konvertieren Sie PIE Laden Sie die .htc-Datei in Ihr Website-Verzeichnis hoch. Sie können sie in jedes beliebige Verzeichnis hochladen, sofern Sie sich dieses Verzeichnis merken.

Schritt 3: Erstellen Sie eine HTML-Datei, schreiben Sie einen CSS3-Code und führen Sie PIE.htc ein, wie unten gezeigt:

#id {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

Hinweis: Der Pfad der .htc-Datei ist relativ zum Pfad der HTML-Datei, nicht zum CSS Datei.

Einige bekannte Probleme:

Diese Methode ist kein Allheilmittel und es gibt einige Einschränkungen und Dinge, die beachtet werden müssen.

1. Probleme im Zusammenhang mit dem Z-Index

Diese CSS3-Effekte unter IE werden mit Hilfe von VML implementiert. Die VML zeichnet das Containerelement mit abgerundeten Ecken oder einem Projektionseffekt, und dann wird das Containerelement als hinterer Geschwisterknoten eingefügt Wenn das Zielelement position:absolute oder position:relative ist, wird das css3-container-Element auf denselben Z-Index-Wert gesetzt. Im DOM-Baum decken Elemente auf derselben Ebene immer den vorherigen ab Dadurch wird erreicht, dass durch das Abdecken andere Elemente nicht hineingesteckt werden können.

Hier kommt also das Problem. Wenn das Positionsattribut des aktuellen Elements statisch ist, was das Standardattribut ist, ist das Z-Index-Attribut nutzlos und kann nicht überschrieben werden Arbeit zu diesem Zeitpunkt erfolgreich. Die Lösung ist auch sehr einfach: Legen Sie die Position des Zielelements fest: relativ oder legen Sie die Position des Vorfahrenelements fest: relativ und weisen Sie einen Z-Indexwert zu (darf nicht -1 sein).

2. Das Problem äquivalenter Pfade

Das Verhaltensattribut des IE-Browsers ist relativ zum HTML-Dokument. Es unterscheidet sich von anderen CSS-Attributen und ist nicht relativ zum CSS-Dokument. Dies macht die Verwendung der Datei pie.htc unpraktisch. Befindet sich der absolute Pfad im Stammverzeichnis, ist das Verschieben der CSS-Datei umständlich. Befindet sich der relative Pfad im HTML-Dokument, ist die Wiederverwendbarkeit der Datei pie.htc auf verschiedenen HTML-Seiten erheblich eingeschränkt. Gleichzeitig sind auch URL-Attributpfade wie die hinter border-image schwierig zu handhaben.

3. Das Problem der Abkürzungen

Verwenden Sie PIE, um CSS3-Rendering unter IE zu implementieren (dasselbe gilt für andere Methoden, z. B. abgerundete Ecken). um die obere linke abgerundete Ecke darzustellen, aber PIE unterstützt diese Schreibweise nicht, es kann nur eine ehrliche Abkürzung sein.

4. Geben Sie den richtigen Inhaltstyp an

Wenn Sie möchten, dass der IE-Browser HTC-Dateien unterstützt, benötigen Sie einen Inhaltstyp-Header mit den Worten „text/x-component“, andernfalls wird das Verhalten ignoriert. Die überwiegende Mehrheit der Webserver stellt den richtigen Inhaltstyp bereit, bei einigen treten jedoch Probleme auf.

Wenn Sie feststellen, dass die PIE-Methode auf Ihrem Computer ungültig ist, d. h. die hier auf die Datei pie.htc verweisende HTC-Datei ungültig ist, überprüfen Sie Ihre Serverkonfiguration. Möglicherweise muss sie auf den neuesten Inhaltstyp aktualisiert werden. Für Apache können Sie beispielsweise Folgendes in der .htaccess-Datei tun:

AddType text/x-component .htc

Allerdings können Sie aus irgendeinem Grund die Serverkonfiguration (z. B. einen öffentlichen Host oder einen von einem Weltraumdienstanbieter bereitgestellten Server) nicht ändern. Sie können eine PHP-Datei verwenden, um die HTC-Datei indirekt aufzurufen. Ich muss Ihnen nur den Code dieser PHP-Datei zeigen und Sie werden wissen, was er bedeutet, und zwar wie folgt:

<?php
header( &#39;Content-type: text/x-component&#39; );
include( &#39;pie.htc&#39; );
?>

Fügen Sie einen Content-Type-Header mit den Wörtern „text/x-component“ durch die PHP-Datei hinzu und rufen Sie den Kuchen auf .htc-Datei gleichzeitig herunterladen.

Bezüglich der oben gezeigten PHP-Datei können Sie hier klicken: pie.php (Rechtsklick – [Ziel | Link speichern unter]), oder Sie können direkt eine neue PHP-Datei erstellen und die beiden oben genannten Codezeilen hinein kopieren. Oder es gibt diese PHP-Datei im Wrapper-Ordner der in diesem Artikel bereitgestellten Originalverpackungsressourcen, der Name ist jedoch in Großbuchstaben geschrieben.

Wenn Sie die obige PHP-Datei verwenden, müssen Sie pie.php und pie.htc im selben Ordnerverzeichnis ablegen, und das Verhalten in CSS sollte wie folgt geschrieben werden:

behavior: url(pie.php);

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass CSS3 unterstützt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!