Question

如here所述，并根据this chromium bug report

在W3C spec中进行了讨论

在HTML命名空间中，转换的none以外的任何值都会导致堆叠上下文和包含块的创建。该对象充当固定位置后代的包含块。

position: fixed是transform以外none以外的任何元素的后代都与该元素相关。

然而IE＆lt; = 11和Firefox至少达到FF36不符合规范，但是相对于视口定位元素（如最初的预期）。

是否有任何修复程序（“polyfill”）可以在所有浏览器中获得相同的行为？

否则有一种方法可以“功能检测”而不是浏览器检测到这种行为来替代样式受影响的元素吗？

Answer 1

我不知道在这种情况下强制跨浏览器一致性的任何“polyfill”因此，因为它在问题中作为可接受的替代方案呈现，我将提供关于“特征检测”的部分的答案。

您可以通过创建一些临时元素来测试浏览器是否符合规范，一个嵌套在另一个中。使用translatey()将父元素从其“自然”位置向下移动，并修复子元素的position，top值为0。然后，通过使用getBoundingClientRect()，我们可以检查子元素的top是否等于父元素的var body=document.body, div=document.createElement("div"), span=document.createElement("span"), compliant; div.style.transform="translatey(100px)"; span.style.position="fixed"; span.style.top=0; div.appendChild(span); body.appendChild(div); compliant=span.getBoundingClientRect().top===div.getBoundingClientRect().top; body.removeChild(div); console.log(compliant); - 如果是，则浏览器符合规范。

+----+--------------+
| Id | Subject      |
+----+--------------+
| 1  | Loreum Ipsum |
| 2  | Hello World  |
| 3  | Pls Help     |
+----+--------------+

跨浏览器修复 - 位置：固定为转换元素的后代

1 个答案: