Как добавить строку css только для Safari

Я делаю веб-сайт, но элемент нуждается в поле в Chrome и других браузерах, но не в safari. Поэтому я хочу добавить строку css, чтобы исправить это, но я не могу найти никакого метода для добавления css только для safari 3+.

9
css html safari stylesheet

6 ответов

Это невозможно, так как вы также применяете то же свойство к Chrome. Как Chrome,так и Safari используют префикс - webkit.

но вы можете сделать это в PHP. 

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

заменить safari.css с вашей собственной таблицей стилей. Кредит @theorise

7

Я считаю, что это должно работать

Скрипка: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
       }
    }

вот ссылка для определения версии браузера https://stackoverflow.com/a/5918791

11

интегрированное решение jQuery:

<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 интегрированное решение:

<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

в safari 9.0+ вы можете сделать это сейчас в CSS с помощью этого приятного взлома. Вам не нужен код JS. Я сделал это, и он отлично работает для меня. Используйте этот хак:

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

/* type your custom css code here */

}

причина, по которой он работает: Safari 9.0 и выше имеют обнаружение функций. Таким образом, обнаружив функцию, которая предназначена исключительно для Safari, вы можете обнаружить Safari. переполнение: - webkit-marquee и justify-content: inherit предназначены исключительно для safari. Вот почему мы можем обнаружить safari с помощью этого простого взлома CSS.

4

вместо добавления дополнительного кода для устранения проблемы, так как поля по умолчанию отличаются, Вы можете попробовать сбросить все поля и отступы окружающих элементов до 0, прежде чем изменять его. Это может решить вашу проблему.

это полностью личное предпочтение, но я начинаю все свои веб-страницы с:

*{
    margin:0;
    padding:0;
}

У меня никогда не было проблем с кросс-браузером относительно полей или заполнения при этом.

1

есть вопрос, подобный этому на CSS-трюки форум. Но ответ в основном, нет. Вы можете попробовать пользователь-агент нюхает серверную сторону или с JavaScript, а затем добавить класс в html (например, для старых версий IE в HTML5 BoilerPlate).

надеюсь, что это помогает.

--избитый к нему парнями выше и ниже!

0