Question

绝对定位时，div（id =“ inner”）大于其父元素，并已应用translateY()。每种浏览器都以不同的方式呈现它。

在Chrome Canary和IE EDGE上，div（id =“ inner”）大于窗口，因此它们添加了滚动条。但是Chrome和Firefox不会添加滚动条。

有人知道为什么会这样吗？哪些浏览器在做正确的事？

body{
  margin: 0;
  padding: 0;
  position: relative;
}

#inner {
  position: absolute;
  height: calc(100vh + 100px);
  width: 70px;
  background-color: blueviolet;
  transform: translateY(-100px);
}

<body>
    <div id="inner"></div>
</body>

Answer 1

我看不到Canary中的滚动条（无论如何在OSX上），并且不会期望：超出视口的元素部分处于负方向，无论如何都不能滚动到该方向。 Canary是每天进行的实验性构建，因此可以预期会出现错误；这不是我要寻找保证正确行为的地方。

我尚未在Edge中进行测试，但其渲染引擎为soon to be replaced by Chromium。在这里，我也不会过多地关注实际上已经停产的浏览器渲染引擎的行为。

据我所知，

滚动条的行为在HTML中没有特别说明。平台和浏览器的处理方式存在很大差异，因此两种行为都可能不是“错误”的，但总的来说，我可以肯定地说，如果这两种浏览器与其他浏览器不同网络，请信任其余的网络。

浏览器以不同的方式解释translate（）和绝对定位

1 个答案: