Microsoft IE/Edge 上的缩放 div 溢出答案

【问题标题】：Scaled div overflows on Microsoft IE/EdgeMicrosoft IE/Edge 上的缩放 div 溢出
【发布时间】：2019-05-31 17:16:18
【问题描述】：

<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 永远不会离开屏幕。

【问题讨论】：

标签： html css internet-explorer microsoft-edge

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：