Question

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

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

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

代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 1

我不知道它是否是IE漏洞。你在中心放置一个大元素，所以＆＃34;物理＆＃34;窗户占40％的位置。通过变换，您可以将图形项目放回中心。您更改了2D图形行为，但没有更改此对象的物理行为（这仍然在窗口上，因此您将看到滚动条）。

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

＆＃13;

.main {
    min-height: 650px;
    width: 80%;
    float: left;
    z-index: 21;
    position: relative;
    background: #fff;
}

.center-transform {
    transform: translateX(10%);
    -webkit-perspective: 1000;
}

＆＃13;

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

＆＃13;

注意：IE中不支持主标记！

IE和Edge中的滚动条错误，包含transformX和margin

1 个答案: