css - 如何仅针对 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; }

感谢其他答案的想法，我试图在这个答案中将所有内容打包成一个完整的解决方案。