有哪些特定于 Safari 的纯 CSS 技巧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/69440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What Safari-specific pure CSS hacks are out there?
提问by Will Olbrys
I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
我想知道是否有任何方法可以只使用 CSS 专门为 Safari 编写 CSS。我知道那里一定有什么东西，但我还没有找到。
回答by Bryan M.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
我认为这个问题是有效的。我同意其他回答，但这并不意味着这是一个可怕的问题。我只需要使用一次 Safari CSS hack 作为临时解决方案，然后就摆脱了它。我同意你不应该只针对 Safari，但知道如何去做也没有坏处。
FYI, this hack only targets Safari 3, and also targets Opera 9.
仅供参考，此 hack 仅针对 Safari 3，也针对 Opera 9。
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
回答by Rich Adams
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
您可以在 CSS 中使用一些技巧来仅针对 Safari，例如在分号后放置一个哈希/井号 (#)，这会导致 Safari 忽略它。例如
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
在 Safari 中，颜色将是白色，在其他所有颜色中都是黑色。
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
但是，您不应该使用 hack，因为它可能会在将来导致浏览器出现问题，并且可能会在旧浏览器中产生不良影响。最安全的方法是使用检测浏览器的服务器端语言（例如 PHP），然后根据用户使用的浏览器提供不同的 CSS 文件，或者您可以使用 JavaScript 来执行相同的操作，然后切换到一个不同的 CSS 文件。
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
服务器端语言在这里是更好的选择，因为并不是每个人的浏览器都启用了 JavaScript，这意味着他们不会看到正确的样式。JavaScript 还增加了在页面正确显示之前需要加载的信息量的开销。
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
Safari 使用 WebKit，它非常适合渲染 CSS。我从来没有遇到过在 Safari 中不起作用但在其他现代浏览器中起作用的任何东西（不包括 IE，它都有自己的问题）。我建议确保您的 CSS符合标准，因为问题可能出在 CSS 而不是 Safari 中。
回答by dawnerd
回答by John Calsbeek
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
您必须使用 JavaScript 或您的服务器来进行用户代理嗅探，以便将 CSS 专门发送到 Safari/WebKit。
回答by Kald
@media screen and (-webkit-min-device-pixel-ratio:0) {}
@media 屏幕和 (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
这似乎是针对 webkit（包括 Chrome）的……或者这真的是仅限于 Safari 吗？
回答by Matt Farina
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
这实际上取决于您要尝试做什么。您是否正在尝试使用包含的一些 CSS3 功能在 safari 中做一些特别的事情，或者您是否正在尝试使站点跨浏览器兼容？
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
如果您试图使站点跨浏览器兼容，我建议使用正确的 CSS 编写站点以使其在 safari/firefox/opera 中看起来不错，然后使用 IE 中包含的条件 CSS 对 IE 进行更改。这应该（希望）为您提供对未来浏览器的兼容性，浏览器在遵循 CSS 规则方面变得越来越好，并提供跨浏览器兼容性。这是一个例子。
By using conditional stylesheets you can avoid hacks all together and target browsers.
通过使用条件样式表，您可以同时避免黑客攻击并针对浏览器。
If you are looking to do something special in safari check out this.
如果您想在 safari 中做一些特别的事情，请查看这个。
