logo标签列表

为什么我在同一个css中需要为不同的浏览器添加前缀？

htmlcss
6

我很好奇为什么一些浏览器需要特殊邀请才能执行相同的CSS布局命令。 有人可以给我解释一下吗？

例如，CSS格式化：

box-sizing: border-box;（请考虑我的框的边框尺寸！）

现在火狐和Safari需要特殊邀请：

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

对于像我这样的普通猫来说，这似乎是在说：
  1. 浏览器：我给出的尺寸是我的盒子的边框！
  2. Firefox：你也一样。
  3. Safari：你也是。
我的意思是...为什么？语法完全一样啊！为什么我要告诉特定的浏览器同样的东西？如果它们需要不同的语法，我会理解...但完全相同的？他们喜欢听到自己的名字吗？
5个回答
2

这是不同浏览器引擎支持不同功能的结果。这些指令旨在告诉浏览器呈现引擎，您正在尝试使用一项仍处于开发/测试阶段或未包含在CSS规范中的功能。请注意，并非所有浏览器都使用不同的渲染引擎。

1

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

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-前缀属性使所有角落都相同：一个大小为30x10像素的省略号。

0
我相信，起初每个浏览器制造商都认为CSS样式是一个好主意，但没有标准。每个浏览器制造商都以自己的前缀方式添加了CSS样式。最终，这些样式中的大多数已成为CSS3标准（通常基于浏览器制造商已经在做什么），但由于旧版浏览器不支持CSS3标准（只支持其带有前缀的标准），因此我们仍然需要放置每个浏览器的语法/前缀。
谢谢你的回答。不过我在想，如果任何浏览器发现它知道的命令，它只是尝试执行它，那么生活会不会更容易呢？无论是否有前缀。 - Schroedingers Cat
这样做可能会更容易，但早期的浏览器不知道官方样式将如何定义，因此如果它们尝试解释非前缀的样式，则可能会解释错误，这会比根本不尝试解释更糟糕。 - Joshua Dwire
0

这意味着这些函数仍处于开发阶段，可能不支持标准规定的所有功能。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接