0

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

看来 Firefox 和 Safari 不会只解释

left: -50%;

和

left: -50px;

但是也

left: -50%px;

我创建了一个JSFiddle来演示这种行为。

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

我最初的意图是将元素定位在外部 div 的左侧，其宽度由内部内容定义（在示例中称为“stretcher”）。由于不小心打错了 CSS 定义，我最终得到了正确的结果，然后意外地发现它不是一个有效的定义。或者我是这么想的。

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

4

4 回答 4

2

我只是在看你的 jsfiddle，并且能够通过简单地省略任何 left 参数或使用 left: 0; 来让 BOOM 与左侧对齐。

因此，我将得出结论，FF 和 Safari 会看到您的 %px 并将该行视为无效，从而保留默认值 left: auto (0)

如果你使用 firebug 计算值检查它，你会看到元素上没有定义 left，它继承了 left: auto;

繁荣！

于 2012-08-22T10:30:50.677 回答
1

left: -50%px;不是有效的 css，请使用%或px

于 2012-08-22T10:16:19.577 回答
0

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

于 2012-08-22T10:16:51.327 回答
0

它的无效 CSS 和有效的 CSS 解析器（如大多数浏览器中的解析器）将删除声明并使用默认或继承的左值。你不应该使用它，因为我在我尝试的每个浏览器中都有相同的结果，所以你看到的结果可能是特定于你的设置的，并且可能会随着下一次 firefox 更新而改变。

下面是我在 FF(14)、Safari、Chrome(21) 中得到的结果图片

所有浏览器结果

于 2012-08-22T10:32:24.310 回答