Html 有没有办法在 CSS 中为特定浏览器设置任何样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32547370/
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
Is there a way to set any style for a specific browser in CSS?
提问by 1.21 gigawatts
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
例如，如果我想在 Webkit、Firefox 等中设置圆角半径，则可以使用以下 CSS：
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
但是这些样式是硬编码的还是只是添加了浏览器的前缀地址？
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
例如，如果我只想在 Firefox 中更改边距，我可以简单地添加前缀，如下所示：
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px;not that I'd want to, just wondering.
很高兴知道：
如果可能的话，是否可以解决特定的版本或平台？例如，-moz-4.3-margin:-4px;不是我想要的，只是想知道。
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
前缀方法是否跨浏览器工作？我想知道因为 Internet Explorer。
Finally, will margin:10pxever knock out -moz-margin:10px? As in, "We, Mozilla, finally support marginso we are going to ignore all old -moz-margintags and will just use the value in the margintag".
最后，会margin:10px淘汰-moz-margin:10px吗？如“我们，Mozilla，终于支持，margin所以我们将忽略所有旧-moz-margin标签，只使用margin标签中的值”。
采纳答案by Quentin
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
例如，如果我想在 Webkit、Firefox 等中设置圆角半径，则可以使用以下 CSS
No, that isn't how it works.
不，这不是它的工作原理。
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
供应商前缀属性用于实验功能。要么是因为该属性的规范尚未锁定，要么是因为浏览器实现者知道他们的实现存在问题。
In general, you shouldn't use them in production code because they are experimental.
通常，您不应在生产代码中使用它们，因为它们是实验性的。
Support for the vendor prefixed versions is removedas support stabilises.
随着支持的稳定，对供应商前缀版本的支持被删除。
Is there a way to set any style for a specific browser in CSS?
有没有办法在 CSS 中为特定浏览器设置任何样式？
There are several methods that have been used for that effect.
有几种方法已用于该效果。
Parser bugs
解析器错误
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a *character on the front of a property name while other browsers will (correctly) discard the entire rule).
通过利用特定 CSS 引擎中的错误或不受支持的功能（例如，某些版本的 IE 将忽略*属性名称前面的字符，而其他浏览器将（正确地）丢弃整个规则）。
Conditional comments
有条件的评论
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link>or <style>elements specifically for certain versions of IE.
旧版本的 Internet Explorer 支持扩展的 HTML 注释语法，该语法可用于添加<link>或<style>专门针对某些 IE 版本的元素。
Support for this has been dropped.
对此的支持已被删除。
JavaScript
JavaScript
Classes can be added to elements (typically the bodyelement) using JavaScript after doing browser detection in JS.
body在 JS 中进行浏览器检测后，可以使用 JavaScript将类添加到元素（通常是元素）。
回答by Ganesh Yadav
It's very bad habit to apply css for specific browser. But there are solutions also:
为特定浏览器应用 css 是非常糟糕的习惯。但也有解决方案：
Only Moz:
只有莫兹：
@-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
丁目和野生动物园：
@media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
IE9以下：
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
我建议除非必要，否则不要使用这个 moz 和 safari 前缀。
回答by lagboy
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just propertywouldn't work so we'd use -prefix-propertyfor certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
据我所知，当 CSS3 被不同的浏览器实现时，前缀被添加到属性中，而只是属性不起作用，所以我们将-prefix-property用于某些属性，如渐变或边框半径。对于大多数浏览器，它们中的大多数现在都可以在没有前缀的情况下工作，并且保留前缀系统只是为了向后兼容。
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px; margin: 1px;
例如，如果我只想在 Firefox 中更改边距，我可以简单地添加前缀，如下所示：
-moz-margin:-4px; 边距：1px；
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
这行不通。但是，您可以通过这种方式为不同的浏览器（例如 IE）使用不同的样式表：
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
浏览器特定的前缀版本不存在。
Hope this answers your question.
希望这能回答你的问题。
