Welche Möglichkeiten gibt es, mit der CSS-Kompatibilität umzugehen?

Css-Kompatibilitätsverarbeitungsmethoden umfassen: 1. Initialisieren Sie den Stil. 2. Fügen Sie private Browserattribute hinzu, z. B. [-moz], um private Firefox-Browserattribute darzustellen. 3. Verwenden Sie automatisierte Plug-Ins, z. B. Plug-Ins, die den Browser automatisch verwalten Präfixe Autoprefixer.

Verarbeitungsmethode:

1. Stilinitialisierung

(Lernvideoempfehlung: CSS-Video-Tutorial)

Der Standard-CSS-Stil jedes Browsers ist unterschiedlich, daher ist die Initialisierung die einfachste und effektivste Methode it

* { 
  margin: 0; 
  padding: 0; 
}

Wenn Sie nicht wissen, was Sie initialisieren sollen, empfehlen wir eine Initialisierungs-CSS-Stilbibliothek normalize.css. Wählen Sie mehrere Stileinstellungen aus und zeigen Sie sie wie folgt an:

html { 
  line-height: 1.15; /* Correct the line height in all browsers */
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
} 
  
body { 
  margin: 0; 
} 
  
a { 
  background-color: transparent; /* Remove the gray background on active links in IE 10. */
} 
  
img { 
  border-style: none; /* Remove the border on images inside links in IE 10. */
}

2. Fügen Sie private Browserattribute hinzu

-moz - stellt private Eigenschaften des Firefox-Browsers dar

-ms- stellt private Eigenschaften des IE-Browsers dar

-webkit- stellt private Eigenschaften von Chrome und Safari dar

-o- stellt private Eigenschaften von Opera dar

Achten Sie auf die Reihenfolge der privaten Eigenschaften, setzen Sie den Standard Schreibmethode schließlich steht das Kompatibilitätsschreiben im Vordergrund

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

3. Automatisierungs-Plug-Ins verwenden

Autoprefixer ist ein Plug-In, das Browser-Präfixe automatisch verwaltet. Nach dem Hinzufügen von Autoprefixer zu einem Ressourcenerstellungstool (z. B. Grunt) Sie können CSS-Präfixe völlig vergessen. Schreiben Sie CSS einfach normal gemäß den neuesten W3C-Spezifikationen.

//我们编写的代码 
div { 
 transform: rotate(30deg); 
} 
  
// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置 
div { 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg); 
}

Die Konfiguration von postcss-loader und postcss-preset-env im Webpack kann auch Kompatibilitätsprobleme lösen

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, mit der CSS-Kompatibilität umzugehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!