css 中 -webkit 、 -khtml 、-moz 、-o 属性之间的区别？答案

【问题标题】：Difference between -webkit , -khtml ,-moz ,-o property in css?css 中 -webkit 、 -khtml 、-moz 、-o 属性之间的区别？
【发布时间】：2014-04-24 13:44:33
【问题描述】：

CSS 中的 -webkit-box-shadow 、 -khtml-box-shadow 、 -moz-box-shadow 、 -o-box-shadow 有什么区别？

我的 CSS 是这样的：

button:hover {
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;

【问题讨论】：

给你reference.sitepoint.com/css/vendorspecific

标签： html css

【解决方案1】：

没有直接的区别，它是一个供应商前缀，用于告诉不同的浏览器如何解释，在这种情况下，属性box-shadow。这样做是因为不同的浏览器可能会以不同的方式实现它。

供应商前缀还允许您使用实验性功能或未最终确定的功能。

【讨论】：

【解决方案2】：

没有区别。这些是供应商前缀，用于支持。

当 CSS 规范未最终确定时，供应商（浏览器制造商）会为 CSS 规则添加前缀。它应该防止规范更改和不兼容问题的问题。（实际上并不是这样，这只是一个烦恼）

Caniuse（一个很好的资源）有关于 CSS 特性的兼容性表。对于 box-shadow，旧的 Safari 和 Chrome 使用-webkit-，而旧的 FF 使用-moz-。 -o- 和 -khtml- 前缀似乎没有必要。

顺便说一句，即使没有浏览器支持（您的情况有），您也应该添加符合标准的规则：

button:hover {
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
}

【讨论】：

【解决方案3】：

没有区别。这些是 CSS 供应商前缀 或 CSS 浏览器前缀

这是浏览器制造商添加对新 CSS 功能的支持的一种方式某种测试和实验期。使用浏览器前缀添加可能不属于正式规范的新功能，以及实现尚未最终确定的规范中的功能。

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

Reference

【讨论】：

【解决方案4】：

这是旧版本浏览器的前缀。 o 代表opera，moz 代表mozilla 等。您可以阅读更多here。

【讨论】：

已知 w3schools 提供的内容不准确。

【解决方案5】：

-webkit -khtml -moz -o- 是供应商前缀：

webkit(safari,浏览器)
moz(火狐)
o(歌剧)
khtml(konqueror)

主要用于 CSS3 功能，它们有时允许使用或更改具有“现代”属性的浏览器行为。

http://css-tricks.com/how-to-deal-with-vendor-prefixes/

【讨论】：