CSS3 转换属性在 Internet Explorer 中的工作方式不同答案

【问题标题】：CSS3 transform property working differently in Internet ExplorerCSS3 转换属性在 Internet Explorer 中的工作方式不同
【发布时间】：2015-01-16 00:08:37
【问题描述】：

我正在使用以下 CSS 将 div 置于页面中间：

.someWrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.centredDiv {
    width: (some width);
    height: (some height)
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

我已经在 Chrome、Firefox 和 Safari 中对此进行了测试，并且可以正常工作。然而，在 Internet Explorer 中（在 IE11 上测试），虽然它确实将 div 居中在窗口的中间，但 IE 似乎认为仍然存在一个不可见的“幽灵 div”，其宽度为 50%，向下为 50%，尚未转换。

这会导致屏幕右下角出现一大堆白色溢出空间和不必要的滚动条。如果我打开溢出：隐藏，这可以解决问题，但在我的网站上这不是一个可行的选项。

那么为什么 IE 会这样做，有没有简单的方法可以绕过它？

编辑：以下代码说明了问题。在 Chrome 或 Firefox 中打开代码，没有溢出。在 IE 中打开它（在 IE11 中测试），你会看到溢出导致空白和底部和右侧的滚动条。

<!DOCTYPE HTML>
  <html>
    <head>
     <style>
       html, body {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
       }

       #wrapper {
         width: 100%;
         height: 100%;
         position: relative;
       }

       #centred {
         width: 90%;
         height: 90%;
         position: absolute;
         top: 50%;
         left: 50%;
         background-color: red;
         -webkit-transform: translate(-50%, -50%);
         -moz-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
       }
     </style>
   </head>
 <body>
   <div id="wrapper">
     <div id="centred">
       Hello world!
     </div>
   </div>
 </body>
</html>

【问题讨论】：

等等。什么？您的代码在除 IE 之外的所有浏览器中都按预期工作？离开这儿！你一定是在开玩笑；）
很有趣，但仍然无济于事......
@AzzyDude 你能提供这个问题的演示吗？我在 Internet Explorer 团队工作，想更仔细地研究一下。另外，我们的Internet Explorer technical preview 中是否存在问题？
@JonathanSampson 嗨乔纳森，我已经编辑了我的答案并提供了一个可以测试的示例。如果您需要更多信息，请告诉我！
@JonathanSampson 我刚刚在技术预览上测试过，也出现了异常。

标签： css internet-explorer transform

【解决方案1】：

更简单的方法

不是从top 和left 定位，而是从bottom 和right 定位。完成此操作后，只需将您的 -50% 翻译更改为积极的 50%。这将删除溢出，例如

.center-center {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

您可以在这里看到这些变化：http://jsfiddle.net/bd17gsss/

值得注意的是，这个错误仍然存在，如果时间和周期允许我们这样做，我们的团队仍然会给予适当的考虑。

原答案

在这个特定的演示中，position: absolute 似乎存在布局错误。它的行为类似于position: relative，但它不应该如此。我已针对此问题打开了一个错误，供 Internet Explorer 团队进一步调查。

现在，您可以将位置值从 absolute 切换到 fixed，这似乎可以正确呈现居中的元素。这使您不必一遍又一遍地使用一组固定的尺寸，而是允许您将此方法用作通用的.modal 样式类，它将应用到的任何内容居中。

此更改的明显警告是您的元素是根据视口定位的，而不是文档本身。这将有效地将其冻结在屏幕上。

.modal {
    position: fixed;
    top: 50%; left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

为了展示这种方法在各个维度上的成功，我们可以循环浏览几个示例集并测试元素的渲染以确保它正确居中：

(function () {

    var xandy,
        index = 0,
        modal = document.querySelector( ".modal" ),
        sizes = [
            { x: "50%"  , y: "30%"   },
            { x: "400px", y: "288px" },
            { x: "25vw" , y: "75vh"  },
            { x: "90%"  , y: "90%"   }
        ];

    setInterval(function changeSize () {
        xandy = sizes[ index++ % sizes.length ];
        modal.style.width = xandy.x;
        modal.style.height = xandy.y;
    }, 1000 );

}());

最终结果可以在这里在线查看：http://jsfiddle.net/jonathansampson/c00u5ev8/

【讨论】：

感谢您的回答。不幸的是，这并不能解决问题。你的方法依赖于我确切地知道我想要居中的 div 有多大，并相应地定位它。我的设计是响应式的，所以居中 div 的大小会有所不同。我需要使用一些 JS 来定位它，这是我与其他浏览器无关的。
@AzzyDude 上面的解决方案与您提供的演示代码执行相同。上述两种方法处理相对大小的元素和绝对大小的元素。
为了举例，90% 来自他的虚假代码。他的真实代码甚至没有有效的 CSS 尺寸属性。不过我同意你的观点，我认为他没有必要使用变换。
@AzzyDude 我已经和我们的首席布局项目经理谈过了。我们的周期快用完了，但我希望看到它被挤进去，因为它是网络上无处不在的模式。关注remote.modern.ie 以获取更新。
@Andrey 在过去的一年里，我们修复了很多的错误。这个没有成功，可能是因为它并不是那么难解决。不是基于top-left 定位，而是基于bottom-right 定位，然后在两个轴上平移50% 而不是-50%。我会在上面更新我的答案。

【解决方案2】：

如果其他人在尝试解决此问题时仍然很开心（因为 Internet Explorer 错误永远不会得到修复，因为我们都喜欢不得不解决它们），并且您希望能够使用 position: relative;而不是position: absolute;，或者top and left而不是bottom and right，试试这个：

.centredDiv {
    position: relative;
    top: calc(50% - 100vh);
    left: calc(50% - 100vw);
    transform: translate(-50%, -50%) translate(100vw, 100vh);
}

您可以使用 100 视图高度/视图宽度或表示最大理论滚动高度/宽度的任意像素值，这样顶部/左侧值就不会超出父级，然后在转换中将其偏移。

如果我和希特勒、斯大林和 Internet Explorer 在电梯里，而我的枪只有一颗子弹……我会杀死 Internet Explorer。

【讨论】：

我认为 IE 明显的哲学“它没有那么坏，我们不需要修复它”，这是它们成为最糟糕和最受辱骂的互联网浏览器的部分原因。

【解决方案3】：

如果实际上只是在另一个帖子中回答了这个问题，您可以使用 display: table; 和 display: table-cell; 来解决这个问题（也可以跨浏览器工作！），请在此处查看我的实时代码：http://codepen.io/TheDutchCoder/pen/GggWqP

在你的情况下是：

#wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

#centred {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

【讨论】：

嗨，您的链接代码似乎没有为我将 div 居中？我只在左上角看到一个黄色方形 div？
tabular data 的概念对您来说有意义吗？当排序、分页和过滤时你的元素会发生什么 将由用户使用可用于<table> 和display:table 元素的内置浏览器表格工具完成？
添加“显示：表格单元；”到 div 类工作。谢谢

【解决方案4】：

您的代码太简略了，而且没有工作示例，因此很难提供任何建议。我担心(some dynamic height/width) 部分，也就是说，这让我觉得你的问题可能出在哪里。

供您参考，您可以查看微软自己对Transform in IE的解释。

【讨论】：

我在几个宽度和高度不同的地方使用了这段代码。我的代码没有错误。 Internet Explorer 只是以不同于其他所有浏览器的方式处理转换属性。它转换了 div，但 div 所在的空间仍然被空白空间占据，从而产生溢出空白。
你试过不同版本的overflow: hidden/etc吗？
是的，我循环浏览了所有这些，看看它们中是否有任何有用的东西。没有帮助。真不明白IE为什么选择与众不同。
我已经用一个可以测试的示例编辑了我的答案。在 Chrome 或 Firefox 中尝试，然后在 IE 中尝试。
@AzzyDude 郑重声明，我们不会选择与众不同:) 我们的布局团队与其他供应商密切合作，以确保我们不会与众不同。浏览器只是极其复杂的软件。不过，我保证，我们会修复它。

【解决方案5】：

对我来说，翻译在 IE 11 中不起作用的问题只是页面自动在兼容模式下运行，导致 IE 11 像旧版浏览器一样运行，不支持 CSS 中的翻译。

我的解决方法是简单地将这个标签放在头部：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  ....

这告诉 IE 使用“最新”代码运行，这实质上意味着 IE 11 使用 IE 11 代码呈现页面，而不是作为旧版本的浏览器。

如果你想冻结对某些特定版本的 IE 的兼容性，你可以使用这个标签，通过使用不同的“内容”值来做到这一点。值“IE-Edge”告诉它使用可用的最新代码。

如果您想查看您的页面是否以兼容模式呈现，请按 F12 在浏览器中调出开发人员工具，切换到“控制台”选项卡，然后重新加载页面。控制台选项卡会显示如下内容：

http://yoursite.com is running in Compatibility View because ...

如果它确实在兼容模式下运行。

【讨论】：

【解决方案6】：

只需在转换线下方添加transition: all .2s ease-in-out;。

【讨论】：