Html 无效的CSS left属性是否可以接受？

我发现了一些奇怪的行为，至少对我来说是这样。如果有人向我解释这一点，我将不胜感激

这段代码只在Firefox中正常工作，在Chrome或Opera中，红色块从所需位置向右移动1px

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
填充：40px；
高度：100vh；
}
.内容{
边框：1px纯黑；
高度：100px
}
.底部{
位置：绝对位置；
顶部：20px；
左：50%；
转化：translateX（-50%）；
高度：40px；
宽度：计算（100%-80px）；
边框：1px纯红；
}

---

没有视觉差异的原因是

left:50%

属性将元素按其父元素的50%推进，而

transform:translateX（-50%）

属性将元素按其自身宽度沿X方向向前推送-50%

---

在第二个代码段中，由于值

invalid

确实无效，浏览器将其忽略。而且，由于没有翻译，它也不会推送。因此，UI中没有区别。

JsFiddle-link：这两个代码片段在chrome和ff中似乎产生了相同的结果。此外，css

left

属性中也没有无效的

invalid

值。这里有更多@Nik我想OP想给

left

一个无效值，而

invalid

是他们想到的第一个无效值…@FZs是的，这是可能的。在我的Windows10笔记本电脑上，我看不到Chrome（或Edge）上的红色框有任何位移。您使用的是什么系统以及浏览器版本号？