html - IE 和 Edge 中带有 transformX 和边距的滚动条错误

Question

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 中的问题。

Answer 1

不知道是不是IE的bug。您在中心放置了一个大元素，因此“物理”位置是窗口上方的 40%。使用转换，您可以将图形元素放回中心。您更改 2D 图形行为而不是此对象的物理行为(它仍在窗口上方，因此您会看到滚动条)。

如果您知道您的 main 是 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!