特定于操作系统的 CSS？答案

【问题标题】：OS-Specific CSS?特定于操作系统的 CSS？
【发布时间】：2014-05-28 19:11:28
【问题描述】：

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

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

【问题讨论】：

浏览器在同一浏览器不同平台上的行为不同？我猜是版本不同？
不，这很有可能。例如，Mac 上的 FF2 尤其有一些 FF2 Windows 中不存在的主要布局错误（例如在某些情况下缺少滚动条）。

标签： css css-selectors

【解决方案1】：

CSS Browser Selector 应该会有所帮助。

【讨论】：

这正是我一直在寻找的——实现了它，并且由于某种原因它没有在 Mac 浏览器上添加选择器，但它在 PC 浏览器中添加了类就好了。谢谢！

【解决方案2】：

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

.gecko2.mac .specialRule { 
    // whatever 
}

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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）

【讨论】：