我需要在我的样式表中为Mac使用特定的样式。最好的方法是什么？
如何使用CSS或Javascript针对Mac进行定位？
6
- Grom S
8
7为什么？ - Delan Azabani
2我很好奇为什么这个问题被踩了；无论这是否是一个好主意，都不能太多地反映出这个问题的质量。尽管这个问题还有很多需要改进的地方（“最佳”应该总是要定义...），但至少它简短明了。 - sarnold
1我的渲染样式存在差异（行内元素的背景颜色），在 Mac 上，我在行之间有空格，不像 Windows。 - Grom S
2那么在Windows上的Firefox、Safari、Chrome或Opera中，您不会得到空格，但在Mac上的Firefox、Safari、Chrome和Opera中，您会得到空格？即使您通过HTTP加载文件（而不是从本地文件系统加载）？ - Quentin
1就像 @GromS 一样，我也看到了一个非常简单的html/css页面呈现方式的差异。所有Win 8.1 FF，Chrome，IE10都显示相同。然而，在OSX Chrome和Safari中呈现的方式与Windows浏览器不同。奇怪但却是真实的！ - Phill Healey
显示剩余3条评论
4个回答
7
在理想的情况下，您不应该需要为不同的操作系统分叉样式。然而，有时候特定的设计会要求这样做 - 特别是在样式化表单元素方面。
如果您确实需要这样做，以下脚本将在html元素上设置一个类：
如果您确实需要这样做，以下脚本将在html元素上设置一个类：
(function (flags, app) {
os('Win', 'os-win');
os('Mac', 'os-mac');
if (document.documentElement) {
document.documentElement.className += flags.join(' ');
}
function os (s, f) { if (app.indexOf(s) !== -1) flags.push(f); }
}([''], String(navigator && navigator.appVersion)));
您可以在HTML头部执行此操作，这意味着页面在初始加载后不会重新渲染。
然后，您可以使用针对Mac的特定CSS规则，如下所示：
.os-mac #my-element { ... }
注意：最好的方法是找到一个不需要操作系统分叉的解决方案。
- johnhunter
4
或者JavaScript
if (navigator.userAgent.match(/Macintosh/))
// do stuff for Macs here, such as load a stylesheet
但实际上，这是不好的做法，你不应该这样做。
- Delan Azabani
1
1为什么这是一个不好的做法？没有解释？ - Yannis Dran
1
仅适用于Mac：
<script>(function(e,t){function n(n,r){if(t.indexOf(n)!==-1)e.push(r)}n("Mac","os-mac");if(document.documentElement){document.documentElement.className+=e.join(" ")}})([""],String(navigator&&navigator.appVersion))</script>
它的工作原理类似于johnhunter的解决方案，只是它被压缩了。
- Yannis Dran
1
navigator.platform 属性在 OS X Safari、Chrome 和 Firefox 中返回 'MacIntel'（我手头没有任何 PPC 盒子）。 如果我要这样做，我会检查它，然后可能将一个名为 .mac 的类放在 <BODY> 标签上，并将其用作 Mac 特定内容的基础。
- Jacob Oscarson
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接