Question

我想要一个名为“shadow”的div下方的阴影：

#shadow { box-shadow: 1px 1px 1px #000 };

完成？

完全没有。它只在一个浏览器中工作。猜猜哪一个。

对于FF / Chrome，我必须添加不太直观的内容：

-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;

现在一切都好。此方案适用于许多CSS属性。为什么呢？

幸运的是，没有-webkit-border，moz-font或-ie-backgroundcolor。

PS。是的，没有关于IE的单词。将这个称为浏览器就像将轮椅与摩德纳汽车比较一样。

PS 2.为什么我的帖子下方的Google Chrome标签旁边有徽标？或者为什么没有Opera＆amp;的标识？ FF？

Answer 1

这是因为浏览器不希望彼此冲突。除此之外，目前还没有真正的盒子阴影“规范”，因此几个浏览器都有自己的实现。

这种方法允许任何供应商特定的扩展共存与任何未来（或当前）CSS 属性没有引起冲突因为，根据W3C 规范，CSS属性名称永远不会以破折号或者破折号开头下划线：

来源：http://reference.sitepoint.com/css/vendorspecific

Answer 2

这是浏览器在CSS Spec完全批准之前发布功能的一种方式。

例如，看看CSS3渐变。 -moz- vs -webkit-完全不同。

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(145,4,88)),
    color-stop(0.58, rgb(174,30,115)),
    color-stop(0.79, rgb(209,57,150))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(145,4,88) 15%,
    rgb(174,30,115) 58%,
    rgb(209,57,150) 79%
);

这可能是有意义的：http://www.alistapart.com/articles/prefix-or-posthack/

所以下次你发现自己抱怨宣布同样的事情东西四次，每次一次浏览器，记住痛苦是临时。这有点像疫苗 - 射击现在疼，真的，但是相比之下真的没那么糟糕对它预防的疾病。并在这种情况下，你正在接种疫苗针对多年的坏情况解析器黑客和浏览器嗅探。我们经历了长期的瘟疫曾经。如果使用前缀，将使用前缀适当地，抵御另一次爆发很长一段时间。

注意：最好包括不带前缀的版本，以便在完全采用该属性时继续使用网站功能。

Answer 3

浏览器的功能超出了他们应遵循的标准。在标准发布之前，它们允许您访问过渡期间的能力，然后它们遵循已发布的标准，并提供与时髦外观“webkit ...”格式的后向兼容性。

Answer 4

基于未完成规范实现的属性具有供应商前缀。同样的事情，如果给定的供应商认为他们的实现没有完成，即使规范是。

Answer 5

正如其他人已经回答的那样，这是因为他们正在实施一项尚未完成规范的功能，或者其实现尚未完成的功能。

这是故意行为; CSS规范指出这是他们在这种情况下应该做的事情。这条规则的原因如下：

为了确保不同浏览器在不同位置实现该功能（由于规范中的更改或不一致），这些差异都可以合并到同一个样式表中。
例如：-moz-border-radius的早期版本与-webkit-border-radius的工作方式完全不同;它们之间存在显着的语法差异，因此如果它们都只是border-radius，那么您将无法同时支持它们。
在规范完成时简化转换。
如果您确实使用具有供应商前缀的功能，请始终将该功能的非前缀版本放在其他版本之后。这样，最近升级为正确支持它的浏览器将获取正确的版本，而不是被过时的前缀版本覆盖。
确保网络开发者知道当他们使用的功能尚未准备好黄金时段时使用。
这很重要：您应该清楚，使用带有供应商前缀的功能意味着您正在使用浏览器制造商和规范编写者认为尚未准备好的功能。你需要知道这一点。如果它有用，请不要让它阻止你使用某些东西，但要注意下一版本的内容可能会有所改变。

为什么CSS属性对Chrome，FF，Opera有不同的名称？

5 个答案: