Firefox 和 Safari 在一个定义中同时使用 % 和 px 定位答案

【问题标题】：Firefox & Safari positioning using both % and px in a single definitionFirefox 和 Safari 在一个定义中同时使用 % 和 px 定位
【发布时间】：2012-08-22 10:05:01
【问题描述】：

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

看来Firefox和Safari不会只解释

left: -50%;

和

left: -50px;

还有

left: -50%px;

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

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

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

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

【问题讨论】：

我看到两个 div 都对齐到容器 div 的左侧，最好有一个我应该看到的图像。

标签： css firefox safari css-position percentage

【解决方案1】：

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

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

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

轰隆隆！

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

很有趣，是的。我决定使用它，因为它只在我的 CMS 中需要，而且无论如何也只是 FF。我会把这归类为一种黑客行为。
我会将其归类为错误，而不是指望它。如前所述，对于相同的代码，chrome 有时会给我不同的结果。如果 FF 明天修复这个“错误”呢？您尝试实现的目标应该完全可以通过有效的跨浏览器 css 实现。（你应该考虑切换到 chrome，比 ff 快得多，并且所有相同的功能或更好）
检查萤火虫，或者我刚刚发布的答案......它只是忽略了这一行并离开：auto正在被继承到元素中

【解决方案4】：

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

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

【讨论】：

这是正确的结果 - 预期的结果。当你只使用 -50% 或 -50px 时，你会得到什么？后者很清楚。 -50% 应该会将 BOOM!-Container 移出视线。
正确，这是默认的左值left:auto;，因为left: -50%px; 的左值被删除并忽略了。