CSS中是否有一种方法可以为特定的浏览器设置任何样式？

Question

例如，如果我想在Webkit、Firefox和其他浏览器中设置圆角半径，可以使用以下CSS：

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

那些样式是硬编码的还是仅仅添加前缀地址就可以呢？

例如，如果我想仅在Firefox中更改边距，我是否可以简单地添加前缀，如下所示：

-moz-margin:-4px;
margin: 1px;

需要注意：
如果可以的话，是否可以针对特定的版本或平台进行设置？例如，-moz-4.3-margin: -4px;虽然我不想这样做，但我只是在想。

使用前缀的方法是否适用于所有浏览器？我在想是因为Internet Explorer。

最后，margin: 10px 是否会替换 -moz-margin: 10px？ 意思是，“我们Mozilla最终支持margin，因此我们将忽略所有旧的-moz-margin标签，并仅使用margin标签中的值”。

- 1.21 gigawatts

---

你为什么想要这样做呢？ - Chrillewoodz

@Chrillewoodz - 为什么我想要针对一个浏览器设置不同的样式？或者为什么我想要设置不同的边距？这只是一个例子。但是回答你的问题，它在Firefox中看起来与其他浏览器不同。 - 1.21 gigawatts

@Chrillewoodz - 相关问题请参考http://stackoverflow.com/questions/22447932/what-is-this-padding-above-the-text-label-and-how-do-i-handle-it。我还没有测试其他浏览器，但我预计每个浏览器中的文本可能会有所偏差。因此，对于每个浏览器，我都要尝试添加一个调整因子。我还没有想出来。 - 1.21 gigawatts

嗯，我了解你的问题。虽然必须这样做似乎有点奇怪，但应该有更简单的解决方案。 - Chrillewoodz

这里有一大堆技巧: https://borishoekmeijer.nl/tutorials/how-to-target-a-specific-browser-css-only/，还有一些在这里: https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html。 - Vadzim

Answer 1

将CSS应用于特定的浏览器是一个非常不好的习惯。但是也有解决方案：

仅限Moz：

@-moz-document url-prefix(){
    body {
        color: #000;
    }
    div{
       margin:-4px;
    }
}

谷歌浏览器和Safari浏览器：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        color: #90f;
    }
}

在IE9以下版本：

<!--[if IE 9]>
    body {
        background:red;
    }
<![endif]-->

我建议除非必要，否则不要使用这个moz和safari前缀。

- Ganesh Yadav

---

应用CSS规则仅限于Chrome浏览器的CSS或样式代码是什么？是@media screen吗？ - Gobliins

Safari和Google Chrome使用WebKit渲染引擎，因此在Safari中很可能每个黑客都能起作用。 - Ganesh Yadav

应用特定于浏览器的CSS规则的一个合理原因是解决浏览器缺陷，而不会影响其他浏览器的行为。 - John Rix

我可以问一下为什么这是不好的做法吗？我之所以问，是因为如果客户对我说“你为什么不能针对每个浏览器进行调整，以保持一致性”，我想知道正确的答案是什么。我宁愿避免这个选项，但如果客户坚持要求，我需要一个好的理由来反驳。 - Cmaxster

Answer 2

例如，如果我想在Webkit、Firefox和其他浏览器中设置圆角，则可以使用以下CSS：

不，这不是它的工作方式。

厂商前缀属性用于实验性功能。要么是因为该属性的规范尚未锁定，要么是因为浏览器实现者知道其实现存在问题。

一般情况下，您不应在生产代码中使用它们，因为它们是实验性的。

随着支持稳定，对厂商前缀版本的支持被删除。

有没有一种方法可以在CSS中为特定的浏览器设置任何样式？

有几种方法可用于此目的。

解析器错误

通过利用特定CSS引擎中的错误或不受支持的功能（例如，某些IE版本将忽略属性名称前面的*字符，而其他浏览器将正确地丢弃整个规则）。

条件注释

早期版本的Internet Explorer支持使用扩展HTML注释语法，该语法可用于专门为某些IE版本添加<link>或<style>元素。

已停止对此的支持。

JavaScript

可以在JS中进行浏览器检测后将类添加到元素（通常是body元素）中。

- Quentin

Answer 3

作为解决方案，您可以在JS中检测浏览器版本，并将其添加到根元素的类中。 您可以通过user agent检测浏览器，并且npm中有多个库可供使用。 使用此类作为基础，您可以定位浏览器。

function detectBrowser() {
  if (navigator.userAgent.includes("Chrome")) {
    return "chrome"
  }
  if (navigator.userAgent.includes("Firefox")) {
    return "firefox"
  }
  if (navigator.userAgent.includes("Safari")) {
    return "safari"
  }
}
document.body.className = detectBrowser()

p {
  display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
  display: block
}

My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>

- Kiran

---

这是一个很棒的巧妙方式。使用它是否存在任何不足之处？ - dcts

不幸的是，它对我不起作用，因为 navigator.userAgent 返回 "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"，所以包括多个浏览器。 - dcts

这只是提供另一种方法的最基本的答案。有更好、更可靠的方法来检测浏览器 - https://dev59.com/vGkw5IYBdhLWcg3wg6ug - Kiran

Answer 4

据我所知，当各种浏览器开始实施CSS3时，属性前缀就被添加到属性中，如果只使用“property”，这样就无法生效，因此对于某些属性（如gradient或border-radius），我们会使用-prefix-property。现在，大多数浏览器使用这些属性时不需要前缀了，并且为了向后兼容性，前缀系统仍然保留。

举个例子，如果我想在Firefox中仅更改margin，我能否简单地添加前缀如下：

-moz-margin:-4px; margin: 1px;

这并不起作用。但是，您可以使用不同的样式表来针对不同的浏览器（例如IE）进行设置：

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

浏览器特定前缀版本的事情并不存在。

希望这回答了你的问题。

- lagboy