Chrome moz-box 无效的属性值

Posted 2023-03-05

【中文标题】Chrome moz-box 无效的属性值

【英文标题】：Chrome moz-box invalid property value

【发布时间】：2013-08-17 20:09:51

【问题描述】：

我用

display:-moz-box

它在 Firefox 上的工作确实是在 chrome 上“无效的属性值”，我现在该怎么办？ 谢谢

【问题讨论】：

这是专门为 Gecko 准备的前缀 - 您还需要包含 WebKit 版本 - display: -webkit-flex

Flexible box model - display : flex, box, flexbox? 的可能重复项

【参考方案1】：

任何以连字符开头的 CSS 代码都是特定于浏览器的功能（这通常也意味着该功能是实验性的，尚未准备好发布完整版）。

只有使用该扩展的浏览器（-moz- 用于 Firefox）才能使用该属性。其他浏览器可能需要指定自己的前缀（例如，-webkit- 用于基于 Webkit 的浏览器，-ms- 用于 IE）。

如果样式已标准化，您还应该指定无前缀版本，因为一旦建立标准版本，实验性前缀可能会从未来的浏览器版本中删除。

在这种特殊情况下，我们谈论的是 flexbox 功能。随着时间的推移，规范已经发生了相当多的变化，因为它已经经历了标准化过程，所以一些浏览器可能支持非标准语法。这使得在这里给出一个简洁的答案有点困难，所以我不会详细说明，而是为您指出一些可能有帮助的文章：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

【讨论】：

+1 伙计，我确实在某处读到，总是最好将标准的（不带任何前缀）添加为最后一个。对吗？

是的，这是正确的，看看：emps.l-c-n.com/notebook/css-vendor-prefixes-and-the-cascade（我会赞成答案，但用完了:()

【参考方案2】：

使用display:-webkit-boxfor chrome

【参考方案3】：

-moz- 是供应商前缀。供应商前缀对于浏览器是唯一的。它们用于应用非标准 CSS。 -moz- 用于 Mozilla Firefox。 -webkit- 用于 chrome。

【讨论】：

moz 实际上是用于 gecko 而 webkit 是用于 webkit，它们不是浏览器独有的，而是渲染引擎独有的，f.e. safari 也使用 webkit