如何仅针对Mac的Safari？

Question

嗨,我已经跨浏览器在所有可以想象的PC浏览器上修复了一个网站,包括Safari.现在我的智能屁股设计师给我发了一个屏幕截图,整个布局在mac上崩溃了.我有一个想法如何解决它(减少元素上的边距几个像素),但我不知道如何只针对Safari,最好只有Safari mac.
最好的方法是什么？

Answer 1

这是一个脚本,你可以在你的页面上(或在一个单独的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; }

感谢其他想法的答案,我试图在这个答案中将所有内容都包含在一个完整的解决方案中.