Html 如何仅为 Safari 添加 css 行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17637846/
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
How do I add a css line ONLY for Safari
提问by Johan
I am making a website, but an element needs margin in Chrome and other browsers, but not in safari. So I want to add a css line to fix it, but I can't find any method to add css for safari 3+ only.
我正在制作一个网站，但一个元素在 Chrome 和其他浏览器中需要边距，但在 safari 中不需要。所以我想添加一个 css 行来修复它，但我找不到任何仅为 safari 3+ 添加 css 的方法。
采纳答案by Abu
This is not possible since you would be applying the same property to Chrome as well. As Chrome, and Safari both use the -webkit- prefix.
这是不可能的，因为您还将对 Chrome 应用相同的属性。Chrome 和 Safari 都使用 -webkit- 前缀。
But you could do this in PHP.
但是你可以在 PHP 中做到这一点。
<?php
$browser = get_browser();
if(strtolower($browser->browser) == 'safari') {
echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
}
?>
Replace safari.css with your own stylesheet. Credit to @theorise
将 safari.css 替换为您自己的样式表。归功于@theorise
回答by user2580076
I believe this should work
我相信这应该有效
Fiddle : http://jsfiddle.net/kHFjM/1/
小提琴：http: //jsfiddle.net/kHFjM/1/
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent .indexOf('safari')!=-1){
if(userAgent .indexOf('chrome') > -1){
//browser is chrome
}else if((userAgent .indexOf('opera') > -1)||(userAgent .indexOf('opr') > -1)){
//browser is opera
}else{
//browser is safari, add css
}
}
here is the link to detect the browser version https://stackoverflow.com/a/5918791
这是检测浏览器版本的链接 https://stackoverflow.com/a/5918791
回答by Krab
jQuery integrated solution:
jQuery综合解决方案：
<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
$("body").addClass("safari");
}
});
</script>
<style>
div {
margin:20px;
}
.safari div {
margin:0;
}
</style>
Pure JS integrated solution:
纯JS集成方案：
<style>
div {
margin:20px;
}
.safari div {
margin:0;
}
</style>
<body>
<script type="text/javascript">
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
document.body.className += " safari";
}
</script>
</body>
回答by Iman Sedighi
In safari 9.0 (only, not > 9.0) you can do it now in CSS with this nice hack. You don't need any JS code. I did it and its working fine for me. Use this hack:
在 safari 9.0（仅，不是> 9.0）中，您现在可以使用这个不错的 hack 在 CSS 中做到这一点。您不需要任何 JS 代码。我做到了，对我来说效果很好。使用这个黑客：
@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
/* type your custom css code here */
}
The reason it is working is: Safari 9.0 and above have feature detection. So by detecting a feature which is exclusively for Safari you can detect Safari. overflow:-webkit-marquee and justify-content:inherit are exclusively for safari. Thats why we can detect safari with this simple CSS hack.
它工作的原因是：Safari 9.0 及更高版本具有功能检测。因此，通过检测专用于 Safari 的功能，您可以检测到 Safari。overflow:-webkit-marquee 和 justify-content:inherit 专用于 safari。这就是为什么我们可以通过这个简单的 CSS hack 来检测 safari。
回答by Iman Sedighi
Instead of adding more code to fix your problem, since the default margins are different, you could try resetting all off the margins and paddings of surrounding elements to 0 first before changing it. That could solve your issue.
与其添加更多代码来解决您的问题，因为默认边距不同，您可以尝试在更改之前先将周围元素的所有边距和填充重置为 0。那可以解决你的问题。
It's completely a personal preference, but I start all of my webpages with:
这完全是个人喜好，但我所有的网页都是这样开始的：
*{
margin:0;
padding:0;
}
I've never had any cross browser issues regarding margins or padding while doing this.
在执行此操作时，我从未遇到过任何有关边距或填充的跨浏览器问题。
回答by Jodyshop
I have tried almost all of the above-suggested solutions, but nothing is working around until I saw a piece of code in my says:
我已经尝试了几乎所有上述建议的解决方案，但在我看到一段代码之前，一切都没有解决：
@-webkit-keyframes fadein {
//code here
}
@-webkit-keyframes fadein {
//code here
}
And it did the job and applied the required CSS for:
Safari, Chrome and Opera > 12.1
它完成了这项工作并应用了所需的 CSS：
Safari, Chrome and Opera > 12.1
Hope this can help someone.
希望这可以帮助某人。
回答by Watters
There is a question similar to this on the CSS-Tricks forum. But the answer is basically, nope. You could attempt user-agent sniffing server side or with JavaScript and then add a class to the html (like for old IE versions in HTML5 BoilerPlate).
CSS-Tricks 论坛上有一个与此类似的问题。但答案基本上是，不。您可以尝试使用用户代理嗅探服务器端或使用 JavaScript，然后向 html 添加一个类（例如 HTML5 BoilerPlate 中的旧 IE 版本）。
Hope this helps.
希望这可以帮助。
--beaten to it by the guys above and below!
——被上面和下面的家伙打败了！
