Wie kann ich CSS-Regeln ausschließlich auf Google Chrome anwenden?

Spezifische CSS-Regeln ausschließlich auf Chrome anwenden

Um der einzigartigen Rendering-Engine von Google Chrome gerecht zu werden, ist es häufig erforderlich, CSS-Regeln anzuwenden ausschließlich darauf. Ein Beispiel ist das Anpassen der Position eines div-Elements.

CSS-Lösung:

Durch die Nutzung von Herstellerpräfixen können Sie Chrome-spezifische Stile wie folgt ansprechen:

• Für Chrome, Safari, Edge und Firefox:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div {
    top: 10px;
  }
}

• Für Chrome 29 (unterstützt gebrochene DPI-Werte)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  div {
    top: 0px;
  }
}

• Für Chrome 22-28:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector {
    -chrome-only(top: 0px);
  }
}

JavaScript-Lösung:

Als Alternative zu CSS können Sie JavaScript verwenden, um den Chrome-Browser zu erkennen und Ändern Sie den Stil des Div entsprechend:

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // Modify the div's top position here
}

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Regeln ausschließlich auf Google Chrome anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!