Question

几分钟前，我偶然发现了一个非常奇怪的现象。

似乎Firefox和Safari不仅会解释

left: -50%;

和

left: -50px;

但也

left: -50%px;

我创建了一个JSFiddle来证明这种行为。

尝试将类.strangePositioner的CSS更改为上述三个值中的任何一个，您将看到每个值的不同结果。

我的初衷是将元素放置在外部div的左侧，其宽度由内部内容定义（在示例中称为“担架”）。由于意外错误地输入了CSS定义，我最终得到了正确的结果，然后意外地发现它不是一个有效的定义。或者我想。

问：为什么浏览器会以他们的方式解释这个问题，并且（除了语法问题）是否有效的CSS？如果它不是有效的CSS，它不符合什么标准？

Answer 1

我只是看着你的jsfiddle并且能够通过简单地省略任何左参数或使用left：0来使BOOM与左对齐：

因此，我将得出结论FF和Safari看到你的％px并将该行视为无效，从而保留默认值left：auto（0）

如果你使用firebug计算值检查它，你会发现元素上没有左定义，它继承左：auto;

BOOM！

Answer 2

left: -50%px;无效css，请使用%或px

Answer 3

我观察了结果并稍微玩了一下。奇怪的是，如何更改top值可以实际影响左侧位置。此外，我有时会使用相同的代码获得不同的结果。绝对没有有效的CSS http://www.w3.org/TR/css3-values/。不会指望它表现得可预测，肯定不会跨浏览器。我的建议是坚持有效的CSS！

Answer 4

它不是有效的CSS和像大多数浏览器中那样的有效CSS解析器将丢弃声明并使用默认或继承的左值。您不应该使用它，因为我在我尝试的每个浏览器中都有相同的结果，因此您可能看到特定于您的设置的结果，并且可以使用下一个firefox更新进行更改。

下面是我在FF（14），Safari，Chrome（21）

中得到的结果的图像

All browser results