logo标签列表

特定于操作系统的CSS？

csscss-selectors
9
在过去，我几乎看不出在不同平台上同一浏览器中的CSS之间存在任何区别- 在Mac上Safari上的页面通常与Windows上的Safari完全相同（FF-Win与FF-Mac也是如此）。然而，现在我遇到了一个问题，两个Mac浏览器将某些元素与它们的PC对应物相比向外推了一个像素。
有没有一种方法可以选择特定操作系统上的浏览器来应用CSS？也许类似于条件样式表，只是针对操作系统而不是浏览器？
同一浏览器在不同平台上表现不同？我猜测是版本不同造成的？ - mauris
不，这是完全可能的。例如，在Mac上的FF2中，存在一些主要的布局错误，这些错误在Windows上的FF2中不存在（例如，在某些情况下缺少滚动条）。 - Brian Moeskau
4个回答
8
这正是我一直在寻找的-我已经实现了它，但不知何故，在Mac浏览器上它没有添加选择器，但在PC上它完全添加了类。谢谢！ - pixi
1

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

.gecko2.mac .specialRule { 
    // whatever 
}

也许从头开始实现这种方法有点具有挑战性，但肯定是可行的（尤其是如果你只关心某些组合）。

1

更改特定操作系统的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;
}
0

我不知道有任何特定于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）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接