我正在制作一个网站，但一个元素在 Chrome 和其他浏览器中需要边距，但在 safari 中不需要。所以我想添加一条 css 行来修复它，但我找不到任何方法只为 safari 3+ 添加 css。
【问题讨论】：
-webkit- 浏览器，而且 CSS 可能会改变它们的样式而不是一个，但让我们看看其他人怎么说。从这里 +1...
标签： html css safari stylesheet
这对我来说适用于新旧 Safari 浏览器：
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance: none) {
/* Safari Only CSS here */
}
}
【讨论】：
我已经尝试了几乎所有上述建议的解决方案，但在我看到我说的一段代码之前，什么都没有解决：
@-webkit-keyframes fadein {
//code here
}
它完成了这项工作并将所需的 CSS 应用于：
Safari, Chrome and Opera > 12.1
希望这可以帮助某人。
【讨论】：
在 safari 9.0（仅限，不是 > 9.0）中，您现在可以通过这个漂亮的 hack 在 CSS 中执行此操作。您不需要任何 JS 代码。我做到了，它对我来说很好。使用这个技巧：
@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
/* type your custom css code here */
}
它起作用的原因是：Safari 9.0 及更高版本具有功能检测功能。因此，通过检测专为 Safari 提供的功能，您可以检测到 Safari。 overflow:-webkit-marquee 和 justify-content:inherit 专门用于 safari。这就是为什么我们可以使用这个简单的 CSS hack 来检测 safari。
【讨论】：
justify-content:inherit 听起来像其他浏览器也可能实现的东西。这是面向未来的吗？
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>
纯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>
【讨论】：
我相信这应该可行
小提琴：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
}
}
这里是检测浏览器版本的链接 https://stackoverflow.com/a/5918791
【讨论】：
CSS-Tricks forum 上有类似的问题。但答案基本上是，不。 您可以尝试用户代理嗅探服务器端或使用 JavaScript，然后向 html 添加一个类（如 HTML5 BoilerPlate 中的旧 IE 版本）。
希望这会有所帮助。
--被上面和下面的家伙打败了！
【讨论】：
不要添加更多代码来解决您的问题，因为默认边距不同，您可以尝试在更改之前先将周围元素的所有边距和填充重置为 0。这可以解决您的问题。
这完全是个人喜好，但我所有网页的开头都是：
*{
margin:0;
padding:0;
}
在执行此操作时，我从未遇到过关于边距或填充的跨浏览器问题。
【讨论】：
这是不可能的，因为您也会将相同的属性应用到 Chrome。由于 Chrome 和 Safari 都使用 -webkit- 前缀。
但是您可以在 PHP 中执行此操作。
<?php
$browser = get_browser();
if(strtolower($browser->browser) == 'safari') {
echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
}
?>
将 safari.css 替换为您自己的样式表。感谢@theorise
【讨论】：