有没有办法为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标签中的值".

Answer 1

将css应用于特定浏览器是非常糟糕的习惯.但也有解决方案:

只有Moz:

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

奇美和野生动物园:

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

IF9以下:

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

我建议不要使用此moz和safari前缀,直到除非必要.

Answer 2

例如,如果我想在Webkit中设置角半径,Firefox和其他我可以使用以下CSS

不,这不是它的工作原理.

供应商前缀属性用于实验功能.要么是因为该属性的规范尚未被锁定,要么因为浏览器实现者知道他们的实现存在问题.

通常,您不应在生产代码中使用它们,因为它们是实验性的.

支持稳定后,将删除对供应商前缀版本的支持.

有没有办法为CSS中的特定浏览器设置任何样式？

有几种方法已用于该效果.

解析器错误

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

有条件的评论

较早版本的Internet Explorer支持扩展的HTML注释语法,可用于添加<link>或<style>特定于某些IE版本的元素.

对此的支持已被取消.

JavaScript的

body在JS中进行浏览器检测后,可以使用JavaScript 将类添加到元素(通常是元素)中.