我想知道是否有一种使用 CSS 定位平台的方法，即不同的操作系统——Windows 7、Windows 8、Linux 等......
我有一个样式表，带有一个 ul 列表和一个边框底部设置，当悬停在菜单元素上时会改变颜色。问题是，在所有浏览器（Chrome、FF IE 等）上，li 项目在 Windows 7 和 Windows8/Ubuntu 之间的显示不同，我尝试使用不同的 CSS 属性，例如行高、填充、边距等，但是无论我做什么，win7和win8/ubuntu之间的项目布局都不一样。我在各种 PC 上进行了测试，并在相同版本的浏览器之间进行了测试（最新的 Chrome、最新的 FF、IE9 ......）
那么我可以说带有 css hack 的 Windows 8 吗？还是只是 Ubuntu/Linux？
根据您使用的浏览器的性质，有一种方法可以做到这一点，一些演绎推理和一些技巧......并非一切都可以做到，但有一些方法可以用于仅使用 CSS 进行操作系统定位。当然，脚本提供了更多选择。这反映了我为确保准确性而进行的大约 6 个月的研究和工作，如下文所述。
目前我不知道用 Chrome 来做这件事的方法，我也没有研究过 Opera，尤其是现在它使用了与 Chrome 相同的方法。Chrome 直到第 3 版才发布适用于 Mac 的版本。此外，对于 Mac，Google 已发表声明，在 Chrome 49 之后将不支持 OS X 10.6-10.8，因此 Chrome 50 及更高版本将指示 Mac OS X 10.9 (Mavericks) 或较新。
不过，Firefox、Internet Explorer 和 Safari 有更好的选择。
Firefox 4 和更新版本可以检测到正在使用 Windows 主题，因此即使是旧版本的 Firefox 至少也能检测到您是否在使用 Windows。我前一阵子创建了这个，今天再次测试了这个：
@media screen and (-moz-windows-theme) {
.windows {
color:red;
}
}
出于同样的原因，这个适用于除 Windows 之外的任何东西，同样适用于 Firefox 4 和更新版本：
@media not screen and (-moz-windows-theme) {
_:-moz-ui-valid, .nonwindows {
color:red;
}
}
-moz-os-version 已添加到 firefox 25 媒体查询中，但根据来自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries的 mozilla 文档，只有几个选项
操作系统：windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
因此，此设置仅适用于现代 Firefox 浏览器版本 >= 25。在发布此更新时，Firefox 为 35 版。
@media screen and (-moz-os-version:windows-xp) {
.windows,.winxp {
color:red;
}
}
@media screen and (-moz-os-version:windows-vista) {
.windows,.vista {
color:red;
}
}
@media screen and (-moz-os-version:windows-win7) {
.windows,.win7 {
color:red;
}
}
@media screen and (-moz-os-version:windows-win8) {
.windows,.win8 {
color:red;
}
}
@media screen and (-moz-os-version:windows-win10) {
.windows,.win10 {
color:red;
}
}
Microsoft 的 Edge 浏览器（以前称为 Spartan）目前仅在 Windows 10 中。要检测它：
/* Microsoft Edge Browser */
@supports (-ms-ime-align:auto) {
.windows,.win10 {
color:red;
}
}
注意：以前的 -ms-accelerator:true 方法在较新版本中发生了变化，因此可以用于针对特定版本的边缘，但不是全部。-ms-ime-align:auto 在 2017 年仍然适用于所有这些。
还有一些方法可以检测 Macintosh 计算机。
Firefox >= 24 为 OS X 10.7 Lion 和更新版本引入了一种新的滚动条覆盖方法，可以通过媒体查询检测到：
@media screen and (-moz-overlay-scrollbars) {
.mac,.mac10_7up {
color:red;
}
}
Firefox >= 25 还可以检测 Mac OS X，因为它们在 25 版中添加了对 OS X 字体平滑的支持：
@supports (-moz-osx-font-smoothing:auto) {
.mac,.mac10_6up {
color:red;
}
}
因为@media 查询和@supports 过滤器可以相互嵌套，所以现在可以进行以下操作——以使用 Firefox 24 和更高版本定位 JUST OS X 10.6 Snow Leopard：
@supports (-moz-osx-font-smoothing:auto) {
@media not all and (-moz-overlay-scrollbars) {
.mac,.mac10_6 {
color:red;
}
}
}
Firefox 17 及更高版本仅支持 Mac OS X 10.6+（Snow Leopard 和更新版本），因此如果您有上述任何 OS X CSS 规则的结果，则说明您使用的不是 OS X 10.5 或更早版本。（https://en.wikipedia.org/wiki/History_of_Firefox#Version_17_.28ESR.29）
相反，再次在 Firefox 25+ 中，可以否定 OS X（10.6 和更高版本）——由于 10.5 和更早版本不支持此版本的 Firefox，这意味着这根本不是 Mac：
@supports (-moz-appearance:none) and (background-attachment:local)
and (not (-moz-osx-font-smoothing:auto)) {
.nonmac {
color:red;
}
}
从 Firefox 49 开始，Firefox 不再支持 10.9 之前的 Mac OS X，因此如果您的版本为 48 或更低，则它必须是 OS X 版本 10.8 或更早，或者如果您的版本介于 17-48 之间，则它必须是 OS X 10.6-10.8出于同样的原因。
当我写这篇文章时，iOS（iPad 和 iPhone）没有 Firefox 版本，所以带有 OS X 字体平滑的 Firefox 确实只涵盖了 Mac 电脑，而不是 Apple 移动设备。与 iOS 版 Chrome 一样，iOS 版 Firefox 使用 Safari 引擎，因此在 iPad 和 iPhone 上使用 Safari hack。因此，它们都是可定位的——作为 Safari，但暗地里并不是他们所说的那样。
通过同时否定两者，我们有一种方法可以定位剩下的东西：Android/Linux，同样是 Firefox 25 和更新版本：
@supports (-moz-appearance:none) and (background-attachment:local)
and (not (-moz-osx-font-smoothing:auto)) {
@media not screen and (-moz-os-version) {
.lindroid {
color:red;
}
}
}
如果您使用 Internet Explorer 版本 6 或更新版本（Windows XP 和更新版本），那么无论如何您显然都在使用 Windows。这也可以通过不止一种方式来确定。
直到 Internet Explorer 9 之前，Windows 中都存在条件注释，因此可用于收集更多信息：
这只检测你有windows，但不一定是版本，因为Internet Explorer 6-9只存在于windows平台上。此时，Internet Explorer 11 是当前版本，因此不会检测 10 和 11，而是检测 9 及之前的版本：
<!--[if (gte IE 6)&(lte IE 9)]><style type="text/css">
.windows {
color:red;
}
</style><![endif]-->
Internet Explorer 6 仅存在于 Windows XP 中，或者今天不再使用的旧 Windows 版本中，所以这适用于那个：
<!--[if (IE 6)]><style type="text/css">
.windows,.winxp {
color:red;
}
</style><![endif]-->
Internet Explorer 7 存在于 Windows XP Vista 中，并且当您单击 Internet Explorer 8 或更高版本中的兼容模式选项时，通常也会被模拟。
如果您使用的是 Internet Explorer 10 或更新版本，则此选项有效，因此您使用的是 Windows 7 或 8。
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
.windows {
color:red;
}
}
我个人制作的其中一个作品检测到 Internet Explorer 11 或更高版本，可用于 Windows 7 和更高版本，最高 8.1。
_:-ms-fullscreen, :root .windows {
color:red;
}
如果您不想使用 Internet Explorer 条件注释，而是希望使用媒体查询，那么这些确实存在：
要检测 Internet Explorer 6-7（因此是 Windows XP 和 Windows 7 之前的旧版本），此方法有效：
@media screen\9
{
.windows {
color:red;
}
}
这是我为 Internet Explorer 9 创建的，因为不存在。（所以赢得 7 或赢得远景）
@media screen and (min-width:0\0) and (min-resolution:.001dpcm)
{
.windows {
color:red;
}
}
这会检测 Internet Explorer 8（因此 windows XP-windows 7）
@media \0screen
{
.windows {
color:red;
}
}
去年，我从其他各个部分制作了这个媒体查询，它处理 Safari 6.1 和更高版本。Safari 在本文发布时是第 7 版。将以这种方式检测 Mac 和移动设备，例如基本的 Android 浏览器：
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.mac_or_mobile {(;
color:red;
);}
}
这是检测大多数较新的 Mac 的更好方法，不包括 iPad（或 Android）等移动设备 - 同样适用于 Safari 6.1 和更新版本，因此它是 Mac ......：
@media screen and (-webkit-max-device-pixel-ratio:1) and (min-color-index:0)
{
.mac_osx {(;
color:red;
);}
}
如果您想要手机，这适用于最近的高清手机：
@media screen and (-webkit-min-device-pixel-ratio:1.1) and (min-color-index:0)
{
.retina {(;
color:red;
);}
}
我在这里有更多关于手机和平板电脑的信息：https://jeffclayton.wordpress.com/2014/07/22/css-for-hi-def-mobile-retina-devices/在这里：https://jeffclayton.wordpress.com/2014/07/28/css-hack-anything-but-ios/
Mac 确实有一段时间有 Internet Explorer，但在 5.5 版之后没有制作更新的版本。
Windows 也有一段时间有 Safari，但在版本 5 之后没有制作更新的版本。大多数 Windows 用户从不使用 Safari，因此当检测到 Safari 时，您通常可以排除 Windows。
如果您将上述所有样式包含在文档中，则下面的 div 将反映上述样式的结果：
Per Firefox and Internet Explorer/Edge:
<div class="windows"> If this is Windows this is red </div>
<div class="winxp"> If this is Windows XP or older this is red </div>
<div class="win10"> If this is Windows 10 this is red </div>
Per Firefox:
<div class="vista"> If this is Windows Vista this is red </div>
<div class="win7"> If this is Windows 7 this is red </div>
<div class="win8"> If this is Windows 8 this is red </div>
<div class="nonwindows"> If this is NOT Windows this is red </div>
<div class="nonmac"> If this is NOT Mac OS X this is red </div>
<div class="mac"> If this is Mac OS X this is red </div>
<div class="mac10_7up"> If this is Mac OS X 10.7 or newer this is red </div>
<div class="mac10_6up"> If this is Mac OS X 10.6 or newer this is red </div>
<div class="mac10_6"> If this is Mac OS X 10.6 only this is red </div>
<div class="lindroid"> If this is Linux or Android this is red </div>
Per Safari:
<div class="mac_osx"> If this is a Mac using Safari
(desktop or laptop computer) this is red (includes old mobile devices but not before iOS 6) </div>
<div class="mac_or_mobile"> If this is a Mac or a mobile device using Safari
(Android or iPad/iPhone) this is red </div>
<div class="retina"> If this is a hi-def mobile device using Safari
(Android or iPad/iPhone) this is red </div>
关于检测的附加说明...
基于 Internet Explorer/Edge 的 Windows 版本（为便于参考）：
As stated above if you detect Internet Explorer 6, you are using XP (or older Win)
If you detect Internet Explorer 7-8, you are using Windows XP, Vista, or Windows 7
If you detect Internet Explorer 9 you are using Windows Vista or Windows 7
If you detect Internet Explorer 10 you are using Windows 7 or Windows 8.0
If you detect Internet Explorer 11 you are using Windows 7 or Windows 8.0/8.1 or Windows 10
If you detect Microsoft Edge you are using Windows 10
Windows 10 是本文发布时的当前 Windows 版本。
出于历史兴趣，如果您真的愿意，您实际上可以在带有我发现的旧黑客的 Mac 上确定 Internet Explorer 5 或更低版本：
/*\*//*/ .mac_internet_explorer { color:red; } /**/
Mac 版本的 Internet Explorer 仅在旧的 PowerPC Mac 上可用，而不是 Intel 型号。
我不相信这仅在 CSS 中是可能的，但是一点 js 可以帮助您识别平台： http ://rafael.adm.br/css_browser_selector/