IE 和 Edge 中带有 transformX 和边距的滚动条错误答案

【问题标题】：Scrollbar bug in IE and Edge with transformX and marginIE 和 Edge 中带有 transformX 和边距的滚动条错误
【发布时间】：2016-02-18 00:41:32
【问题描述】：

在 IE 中有一个奇怪的错误，如果你使用 margin-left 和 transform: translateX 你会得到一个水平滚动条。

它在 Chrome 和 Firefox 中运行良好。看起来就像 IE 保留了空间，即使转换将元素拉回了

示例站点：http://site.brijn.com/dap/（在 chrome/firefox 中运行良好。在 IE 中滚动条）

代码：

.main {
    min-height: 650px;
    width: 80%;
    float: left;
    z-index: 21;
    position: relative;
    background: #fff;
}

.center-transform {
    margin-left: 50%;
    transform: translateX(-50%);
    -webkit-perspective: 1000;
}

<main class="main container center-transform" role="main" itemscope="" itemprop="mainContentOfPage">
    <!-- Content of element -->
</main>

我做错了吗？或者这是 IE 中的问题。

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

我不知道这是否是一个 IE 错误。您在中心放置一个大元素，因此“物理”位置是窗口上方的 40%。使用变换，您可以将图形项放回中心。您更改了 2D 图形行为，但没有更改此对象的物理行为（它仍在窗口上方，因此您将看到滚动条）。

如果你知道你的主要是 80%，你可以简单地把它翻译成 10%（给你同样的结果）。

.main {
    min-height: 650px;
    width: 80%;
    float: left;
    z-index: 21;
    position: relative;
    background: #fff;
}

.center-transform {
    transform: translateX(10%);
    -webkit-perspective: 1000;
}

<main class="main container center-transform" role="main" itemscope="" itemprop="mainContentOfPage">
    <!-- Content of element -->
</main>

注意： IE 不支持 main-tag！

【讨论】：