Question

过去，我看到不同平台上相同浏览器的CSS几乎没有区别 - Mac上Safari的页面通常与Windows上的Safari相同（与FF-Win和FF-Mac相同）。但是，现在我遇到了一个问题，即两个Mac浏览器与PC对应物相比，一些像素推出了一些像素。

有没有办法选择特定操作系统上的浏览器来应用CSS？也许类似于条件样式表，仅适用于操作系统而不是浏览器？

Answer 1

CSS Browser Selector应该有帮助。

Answer 2

很有可能。最常见的方法（许多JS框架采用）是首先基于UA字符串和/或已知JS对象/方法的存在来进行平台/浏览器检测。然后，他们通常将平台/浏览器CSS类应用于<head>或<body>，以便您可以编写如下规则：

.gecko2.mac .specialRule { 
    // whatever 
}

从头开始推出这种方法可能有点挑战，但肯定有可能（特别是如果你只关心某些组合）。

Answer 3

更改特定操作系统的CSS：

我编写了这个函数，可以识别你的操作系统是XP还是不同的，并将特定的CSS作为结果。

function changeStyle() {
var css = document.createElement('link');
css.rel="stylesheet";
css.type = 'text/css';

if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1){ /* IF is windowsXP */
css.href = 'styleXP.css';
} else {
css.href = 'style7.css';
}

document.getElementsByTagName("head")[0].appendChild(css);
return false;
}

Answer 4

我不知道任何特定于CSS的技巧，但您可以选择使用Javascript加载的样式表。您可以使用navigator.appVersion获取操作系统类型以及更多信息。

例如，我得到：

5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-us) AppleWebKit/532.5+ (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10

（来自：http://www.javascripter.com/faq/operatin.htm）

特定于操作系统的CSS？

4 个答案: