问题标签 [vendor-prefix]

我有一个在 ie 和 chrome 上运行良好的简单网站，但在 Firefox 中有点时髦。我有一个黄色矩形的 div 和一个位于其顶部的相同颜色的导航栏，但由于某种原因，Firefox 将导航移动到 div 的正下方。这是我的代码：

使用以下CSS：

这是设置 CSS 的 JS 代码的摘录：

现在这确实有效，但我确实记得不久前我有浏览器拒绝合作而不transitionProperty使用样式属性的供应商前缀版本transform，即需要读取 CSS 以-webkit-transition-property: -webkit-transform, opacity;使浏览器以我的方式行事想。

显然，这在今天仍然适用于同样支持-webkit-transition-property: transform, opacity;. 不难想象，在未来的某个时候，某些 webkit 浏览器会突然停止检查-webkit-前缀。

Modernizr（和 Modernizr 文档）为我们提供了prefixed()用于在它们之间进行转换的原语（等等），但我不清楚如何稳健地测试时尚之后的样式是否transitionProperty需要设置前缀样式属性名称。通过简单地分配不带前缀的样式并查看它是否“需要”来测试样式本身以查看它们是否需要添加前缀是非常简单的。但我不太确定这种方法是否适用于指定样式属性名称的特殊情况。

当然，我可以使用超便携的矫枉过正的方法，即在出现这种情况时设置所有四种 CSS 声明组合，如果浏览器支持任何样式。

我知道，如果我们想确保某些 CSS3 功能在任何地方都能正常工作，我们需要使用 W3C 推荐的前缀版本，例如：

我知道前缀用于实验性功能，但为什么它们是必要的？他们为什么不在最初的 W3C 上测试它们呢？每个 CSS3 功能是否都有或有每个浏览器的前缀，或者如果他们认为应该创建一个前缀版本？

我注意到用 SASS 编写的 inuit.css 有一个 .vendor 混合：

有没有办法在 LESS 中使用 e() 和 @{ } 等一些奇怪的功能来复制它？

我通过 Javascript 将 CSS 规则直接添加到样式表中：

我需要稍后显示这些规则：

但是每个浏览器只显示自己的前缀，例如，当我在 Chrome 上时，我只得到：

当我在 Firefox 上时，我只得到：

无论我使用的是什么浏览器，如何将它们全部显示出来？

PS：我不能使用document.getElementById("foo").style.width;显示 CSS 之类的东西，使用styleSheets[]andcssRules[]是必须的。

使用供应商前缀时，请务必记住您在声明中列出规则的顺序。

我已经知道供应商前缀是如何工作的以及为什么需要，但为什么最好首先列出供应商前缀的属性，最后列出非前缀的 CSS3 属性？我还检查了许多重要站点，他们正在使用这种方法：

就是这样，为什么要把实际的 CSS3 属性放在最后呢？有什么特殊原因吗？

请帮助我，我看不到错误。我什么都试过了。谢谢人们。你可以在这个链接上看到我的代码。

http://jsfiddle.net/astrogastro/dFZgn/

因此，它在 Safari 中运行良好，在 Chrome 中几乎没有冻结，但没关系。我的动画在 Opera 和 Firefox 中完全消失了。任何想法？

http://www.astrogastro.byethost24.com/

在我正在学习的课程中，我发现了以下内容（摘录）：

但是，根据此表，使用其他浏览器特定前缀似乎没有意义，而不是-webkit-. 较新版本的 IE、FireFox 和 Opera 始终支持此属性，而旧版本则不支持。所以在我看来，以 , 开头的行-moz-无论如何-o-都-ms-不会影响页面显示。我可以——从现在开始——在 的情况下总是把这些排除在外transition吗？还是我误解了什么？还是表格不正确？

我正在寻找一种将 mixin 用于特定于浏览器的 CSS hack 的解决方案。我正在使用 JavaScript 在 HTML 类中添加浏览器标记。喜欢.ie .ie7 .ie8 .ie9

我想像这样使用mixin：

期望的输出：

我尝试制作的mixin：

问题是输出是：

我们使用这样的css规则......

为什么我一开始不应该像这样使用它......

更新

谁能给我看一个最初使用它时发生错误的例子？