Question

<html>
<head>
  <style>
  .foo {
    position: absolute;
    background-color: #f00;
    width: 2000px;
    height: 50px;
    transform-origin: left;
    left: 0;
    transform: scaleX(0.1);
  }
  </style>
</head>
<body>
  <div class="foo"></div>
</body>
</html>

在大多数浏览器上，它都能正常工作。但是在Microsoft IE / Edge上，尽管div的宽度小于屏幕宽度，但仍会出现水平滚动条。我该如何摆脱呢？

我必须使用transform：scaleX，因为div的大小和位置是根据某些条件使用JavaScript计算得出的。但是，该脚本将确保div永远不会超出屏幕。

Answer 1

您可以使用overflow-x: hidden;来禁用它。

Answer 2

您可以添加-ms-overflow-style: none;来避免水平滚动条。

   body {
        -ms-overflow-style: none;
    }

有关该属性的更多信息，请参考：https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style

Microsoft IE / Edge上的缩放div溢出

2 个答案: