css – 如何仅针对Mac的Safari?

嗨,我已经跨浏览器在所有可想到的PC浏览器(包括Safari)上修复了一个网站。
现在我的聪明的屁股设计师给了我一个屏幕截图的整个布局在mac上崩溃。
我有一个想法如何解决它(减少一个元素的边缘几点),但我不知道如何仅针对Safari,最好只有Safari mac。
最好的方式是做什么?

解决方法

这是一个脚本,您可以在页面(或单独的js文件)中添加一个脚本,它将向html元素添加一个类,以便您可以将safari-mac特定的css添加到您的css文件中。
(function($){
    // console.log(navigator.userAgent);
    /* Adjustments for Safari on Mac */
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
        // console.log('Safari on Mac detected,applying class...');
        $('html').addClass('safari-mac'); // provide a class for the safari-mac specific css to filter with
    }
})(jQuery);

示例css修复,可以在页面或外部css文件等中:

/* Safari Mac specific alterations
 * (relies on class added by js browser detection above),* to take into account different font metrics */
.safari-mac #page4 .section p.fussyDesigner { margin-right: -15px; }
.safari-mac #page8 .section-footer { width: 694px; }

感谢其他答案的答案,我已经尝试将所有内容都包含在一个完整的解决方案中。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效