CSS-Kompatibilitätshandbuch

Wenn Sie sich über die Kompatibilität nicht sicher sind, sollten Sie auch prüfen, inwieweit die Seite kompatibel sein sollte.

1 Ob dies der Fall sein muss kompatibel

Sie müssen zu Beginn gut über dieses Problem nachdenken. Einige Effekte sind nicht kompatibel, solange der Rückzug reibungslos verläuft.

Zum Beispiel CSS-Formen In diesem Fall:

Das Bild stammt von w3cplus. In diesem Fall ist es besser, die Unterstützung für Browser nicht zu erzwingen, die das CSS-Shapes-Attribut nicht unterstützen.

2 Ist es möglich, einfach einen Backoff durchzuführen?

Im Vergleich zum ersten Punkt wird eine zusätzliche Backoff-Verarbeitung hinzugefügt (die bereits vorhanden sein sollte), z. B. eine CSS-Gradienten-Back-Verarbeitung:

    background-color: #f9efee;
    background-image: linear-gradient(to left, #f5e5e3 0%, #ffffff 52%, #f5e5e3 100%);

3 Situationen, die eine zusätzliche Unterscheidung erfordern

Wenn Sie CSS verwenden, um damit umzugehen, handelt es sich um eine Vielzahl von HACKs:

Eine Sammlung von CSS-Hack-Techniken

Verwenden Sie die CSS-Eigenschaften des Browsers geschickt. Werten Sie Inkompatibilität und Abwärtskompatibilität mit Hack-Techniken auf.

Wenn Sie JS verwenden, um damit umzugehen, können Sie Ihre Fähigkeiten am besten beurteilen. Sie können modernizr.js oder den folgenden Code verwenden:

if ( !'shape-margin' in document.documentElement.style) {}
//如果不支持shape-margin属性则如何如何

4 Erzwungen Der Effekt ist der gleiche

Zu diesem Zeitpunkt können Sie sich nur diesen Code ausdenken

text-shadow: 2px 2px 15px #333;
filter: glow(color=#333333, strength=2);
/*老IE不支持文字阴影，对其使用IE滤镜*/

Weitere Artikel zur CSS-Kompatibilität Strategien, achten Sie bitte auf die chinesische PHP-Website!