Wie kann ich auf Chrome-spezifische CSS-Regeln abzielen?

So zielen Sie auf Chrome-spezifische CSS-Regeln ab

Beim Anpassen von Webelementen mit CSS kann es vorkommen, dass Sie bestimmte Stile nur auf bestimmte DOM-Elemente anwenden müssen der Chrome-Browser. Hier sind einige Lösungen, um dies zu erreichen:

CSS-Lösung

1. Webkit-Medienabfrage: Chrome verwendet für viele seiner CSS-Eigenschaften das Präfix „-webkit“. . Sie können auf Chrome-spezifische Stile abzielen, indem Sie die Medienabfrage „-webkit-min-device-pixel-ratio“ verwenden, wie unten gezeigt:

/* Chrome, Safari, Edge, Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

2. Chrome-spezifische Medienabfrage : Für Chrome-Versionen 29 können Sie die folgende Medienabfrage verwenden, um Chrome als Ziel zu verwenden nur:

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

3. Chrome-spezifische CSS-Syntax (Chrome 22-28): In den Chrome-Versionen 22-28 können Sie das „-chrome-“ verwenden. :only“-Syntax zur gezielten Ausrichtung auf bestimmte Elemente im Browser:

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript Lösung

Sie können auch JavaScript verwenden, um zu prüfen, ob es sich bei einem Browser um Chrome handelt, und die gewünschten Stile entsprechend anzuwenden:

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // modify button 
}

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