Я создаю веб-сайт, но элемент нуждается в запасе в Chrome и других браузерах, но не в сафари. Поэтому я хочу добавить строку css, чтобы исправить ее, но я не могу найти какой-либо метод для добавления css только для сафари 3+.
Как добавить строку css ТОЛЬКО для Safari
Ответ 1
Это невозможно, так как вы будете применять одно и то же свойство к 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
Ответ 2
Я считаю, что это должно работать
Fiddle: 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
}
}
вот ссылка для обнаружения версии браузера fooobar.com/questions/30550/...
Ответ 3
Интегрированное решение 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>
Ответ 4
В Safari 9.0 (только не> 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: наследовать исключительно для сафари. Вот почему мы можем обнаружить сафари с помощью этого простого CSS-хака.
Ответ 5
Вместо того, чтобы добавлять больше кода, чтобы исправить вашу проблему, поскольку поля по умолчанию различны, вы можете попробовать сначала сбросить все поля и прокладки окружающих элементов до 0 перед их заменой. Это может решить вашу проблему.
Это полностью личное предпочтение, но я начинаю все свои веб-страницы с помощью:
*{
margin:0;
padding:0;
}
У меня никогда не было проблем с перекрестным браузером относительно полей или отступов, делая это.
Ответ 6
Надеюсь, что это поможет.
- избили его ребятами выше и ниже!
Ответ 7
Я перепробовал почти все предложенные выше решения, но ничего не получалось, пока я не увидел кусок кода в своем сообщении:
@-webkit-keyframes fadein {//code here }
И он сделал свою работу и применил необходимый CSS для: Safari, Chrome and Opera > 12.1
Надеюсь, что это может кому-то помочь.