wake-up-neo.net

Wie füge ich NUR für Safari eine CSS-Zeile hinzu?

Ich erstelle eine Website, aber ein Element benötigt in Chrome und anderen Browsern einen Spielraum, aber nicht in Safari. Ich möchte also eine CSS-Zeile hinzufügen, um das Problem zu beheben, aber ich kann keine Methode finden, um CSS nur für Safari 3+ hinzuzufügen.

htmlcsssafaristylesheet
10
Johan

Dies ist nicht möglich, da Sie dieselbe Eigenschaft auch auf Chrome anwenden würden. Sowohl Chrome als auch Safari verwenden das Präfix -webkit-.

Aber Sie könnten dies in PHP tun. 

<?php
    $browser = get_browser();
    if(strtolower($browser->browser) == 'safari') {
        echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
    } 
?>

Ersetzen Sie safari.css durch Ihr eigenes Stylesheet. Dank an @theorise

8
Abu

Ich glaube, das sollte funktionieren 

Geige: http://jsfiddle.net/kHFjM/1/

    var userAgent = navigator.userAgent.toLowerCase(); 
    if (userAgent .indexOf('safari')!=-1){ 
       if(userAgent .indexOf('chrome')  > -1){
         //browser is chrome
       }else if((userAgent .indexOf('opera')  > -1)||(userAgent .indexOf('opr')  > -1)){
         //browser is opera 
       }else{
        //browser is safari, add css
       }
    }

hier ist der Link zum Ermitteln der Browserversion https://stackoverflow.com/a/5918791

11
user2580076

jQuery integrierte Lösung: 

<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        $("body").addClass("safari");
    }
});
</script>

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>

Pure JS integrierte Lösung: 

<style>
div {
  margin:20px;
}

.safari div {
  margin:0;
}
</style>
<body>
<script type="text/javascript"> 
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        document.body.className += " safari";
    }
</script>
</body>
7
Krab

In Safari 9.0+ können Sie es jetzt mit diesem Nice-Hack in CSS tun. Sie benötigen keinen JS-Code. Ich habe es getan und es funktioniert gut für mich. Verwenden Sie diesen Hack: 

@supports (overflow:-webkit-Marquee) and (justify-content:inherit) {

/* type your custom css code here */

}

Der Grund, warum es funktioniert, ist: Safari 9.0 und höher verfügen über Funktionserkennung. Indem Sie eine Funktion entdecken, die ausschließlich für Safari bestimmt ist, können Sie Safari erkennen. Überlauf: -webkit-Marquee und Rechtfertigen-Inhalt: Das Erben erfolgt ausschließlich für Safari. Deshalb können wir Safari mit diesem einfachen CSS-Hack erkennen.

4
Iman Sedighi

Anstatt mehr Code hinzuzufügen, um das Problem zu beheben, können Sie, da die Standardränder unterschiedlich sind, zunächst alle Ränder und Füllungen der umgebenden Elemente auf 0 zurücksetzen, bevor Sie sie ändern. Das könnte dein Problem lösen.

Es ist absolut eine persönliche Präferenz, aber ich starte alle meine Webseiten mit:

*{
    margin:0;
    padding:0;
}

Ich hatte noch nie Probleme mit dem Browser, was Margen oder Füllungen angeht.

1
user2477011

Es gibt eine ähnliche Frage im CSS-Tricks-Forum . Die Antwort ist jedoch im Grunde: Nein. Sie könnten versuchen, das User-Agent-Sniffing auf der Serverseite oder mit JavaScript durchzuführen und dann der HTML-Klasse eine Klasse hinzuzufügen (wie für alte IE -Versionen in HTML5 BoilerPlate).

Hoffe das hilft.

- geschlagen von den Jungs oben und unten!

0
Watters

Ich habe fast alle der oben vorgeschlagenen Lösungen ausprobiert, aber es funktioniert nichts, bis ich einen Teil des Codes in meinen Aussagen sehe:

@-webkit-keyframes fadein { //code here }

Und es hat den Job gemacht und das erforderliche CSS angewendet für: Safari, Chrome and Opera > 12.1

Hoffe das kann jemandem helfen.

0
Jodyshop