6

我很好奇，为什么有些浏览器需要特殊的邀请才能使用相同的 css 布局命令。任何人都可以启发我吗？

示例：CSS-formatting: box-sizing:border-box; （请考虑我盒子的边框尺寸！）

现在来了 Firefox 和 safari，他们需要一个特别的邀请：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

对于像我这样简单的猫来说，这似乎是在说：

  1. 浏览器：我给你的尺寸是我盒子的边框！
  2. firefox：这对你也很重要。
  3. Safari：它也适合你。

我的意思是……为什么？这是完全相同的语法！为什么我必须将相同的内容告诉特定的浏览器？我会理解他们是否需要不同的语法..但完全相同？！他们喜欢听到别人叫他们的名字吗？

4

5 回答 5

2

这是不同浏览器引擎支持不同事物的结果。这些指令只是旨在告诉浏览器的渲染引擎您正在寻找使用仍在开发/测试中或在 CSS 规范中不标准的功能。请注意，并非所有浏览器都使用不同的渲染引擎。

于 2012-11-02T13:45:16.647 回答
1

因为这些属性没有被 W3C 标准化，它们仍处于草案阶段，因此供应商实现了自己的版本 - 使用前缀以避免与其他浏览器实现或规范最终确定后的最终实现发生冲突。

于 2012-11-02T13:44:35.397 回答
0

对上述答案的补充。列出所有属性时，最后列出标准属性，如下所示：

-moz-border-radius: 10px 5px;
-webkit-boder-radius: 10px 5px;
border-radius: 10px 5px;

如果你这样做，旧的 Firefox 将使用第一条规则而忽略其他规则，因为它不理解它们，旧的 Safari 也是如此。

当您首先列出标准属性时，最新版本的浏览器会出现问题，这些版本支持border-radius不带前缀：

border-radius: 10px 5px; 
-moz-border-radius: 10px 5px;
-webkit-boder-radius: 10px 5px;

当您在 Safari 中浏览此站点时，它将首先使用标准属性，然后用该-webkit-属性覆盖它。问题在于两种实现的规范不同。标准属性使左上角和右下角圆角为 30 像素，右上角和左下角圆角为10像素。

另一方面，-webkit- prefixed 属性使所有角都相同：大小为 30x10px 的省略号。

于 2012-11-02T13:57:14.507 回答
0

我相信，起初每个浏览器制造商都认为 css 样式是个好主意，但没有标准。每个浏览器制造商都以自己的方式添加了带有前缀的 css 样式。最终，这些样式中的大多数都成为了 CSS3 标准（通常基于浏览器制造商已经在做的事情），但由于旧版浏览器不支持 CSS3 标准（仅支持带有前缀的标准），我们仍然可以放置每个浏览器的语法/字首。

于 2012-11-02T13:45:26.653 回答
0

这意味着此功能仍在开发中，可能不支持标准规定的所有功能

于 2012-11-02T13:46:07.053 回答