logo标签列表

CSS特定平台hack

csscross-platform
3
我想知道是否有一种方法可以通过CSS针对不同操作系统（例如Windows 7、Windows 8、Linux等）来定位平台。 我的样式表中有一个ul列表和一个border-bottom设置，当悬停在菜单元素上时，该设置会更改颜色。问题是，在Windows 7和Windows 8 / Ubuntu上，li项目在所有浏览器上（Chrome、FF IE等）的显示不同。我尝试使用不同的CSS属性，如行高、填充、边距等，但无论我做什么，项目的布局在win7和win8 / ubuntu之间都不相同。我在各种PC上进行了测试，并在同一版本的浏览器之间进行了测试（最新版的Chrome、最新版的FF、IE9等）。那么我能否使用CSS hack来定位Windows 8？或者只有Ubuntu / Linux？
请查看我的另一篇帖子，以了解我在CSS方面遇到的问题：http://stackoverflow.com/questions/15175577/css-html-compatibility-issues-across-the-same-browser - DextrousDave
可能会有用：http://dowebsitesneedtolookexactlythesameineverybrowser.com/ - Wesley Murch
如果您提供实际的HTML/CSS代码，那么我相信一定有解决方案。我认为您的方法（针对操作系统）是根本错误的。 - Wesley Murch
我想了解一下你所看到的布局差异。如果你使用的是相同的浏览器版本，跨平台的差异应该是很小的；毕竟它们都运行着相同的渲染引擎。如果你能更详细地解释一下你的具体问题，我们也许可以解释或减轻它，而不必诉诸于hack手段。例如：可能会有一个因素是字体；也就是说，如果布局依赖于字体宽度，并且不同的操作系统没有安装相同的字体。然而，针对特定操作系统的hack并不是解决这个问题的答案，因为在任何操作系统上，用户可能安装了不同的字体。 - Spudley
谢谢您的回答。请查看我上面发布的帖子（第一条评论），其中包含所有相关的CSS和HTML以及解释性图片...这是我第一次遇到这种情况，我真的在使用直接的CSS - 在列表项上填充顶部，行高等。 - DextrousDave
1
@Wesley - 哈哈，謝謝，但那對我尋找答案沒有幫助！ - DextrousDave
2个回答
11
有一种方法可以通过你使用的浏览器的性质，一些演绎推理和一些技巧来完成部分操作...并非所有操作都能完成，但是有一些你可以只用CSS来进行操作系统定位。当然，脚本提供了更多选项。如下文所述，这反映了我在精确度方面进行了大约6个月的研究和工作。
目前我不知道如何在Chrome中实现这一点，而且我也没有研究过Opera，特别是现在它使用了与Chrome相同的许多方法。直到第3版，Chrome才发布了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中添加的媒体查询，但根据Mozilla文档，它只有几个选项，网址为https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

操作系统：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;
    }
}

微软的Edge浏览器（原名斯巴达）目前仅适用于Windows 10。要检测它：

/* Microsoft Edge Browser */

@supports (-ms-ime-align:auto) {
    .windows,.win10 {
        color:red;
    }
}

注意：在新版本中，以前的-ms-accelerator:true方法已经更改，因此可以用于针对特定版本的Edge，但不是所有版本。-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及更高版本的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+ (雪豹及更新版本)，因此，如果您得到任何来自上述操作系统 CSS 规则的结果，则说明您没有使用 Mac 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不再支持Mac OS X 10.9之前的版本，因此如果您使用的是48或更低版本，则必须是OS X 10.8或更早版本，或者如果您使用的版本介于17-48之间，则必须是OS X 10.6-10.8。
当我编写这篇文章时，iOS（iPad和iPhone）没有Firefox版本，因此具有OS X字体平滑功能的Firefox只适用于Mac电脑，而不适用于苹果移动设备。与iOS上的Chrome一样，Firefox for iOS使用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。这可以通过多种方式确定。
条件注释在Windows中存在，直到Internet Explorer 9，因此可以使用它们来收集更多信息：
这只能检测到您是否拥有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创建了这个，因为之前没有。 (所以只能在win 7或win vista上使用)
@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; } /**/

Internet Explorer 的 Mac 版本只能在旧的 PowerPC Mac 上使用，而不能在 Intel 版本上使用。

这太棒了。 - henry
哇，太棒了。你似乎对CSS hack有着热情 :) - shesek
哇，@JeffClayton 的解释太棒了。我通过这个答案学到了新的东西。 - RamRajVasavi
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接