CSS CSS3 转换属性在 Internet Explorer 中的工作方式不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27000492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transform property working differently in Internet Explorer
提问by AzzyDude
I am using the following CSS to centre a div in the middle of my page:
我正在使用以下 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%);
}
I have tested this in Chrome, Firefox and Safari and it works as intended. However, in Internet Explorer (testing on IE11), while it does centre the div in the middle of the window, IE seems to think there is still an invisible 'ghost div' 50% across and 50% down which has not been transformed.
我已经在 Chrome、Firefox 和 Safari 中测试过它，它按预期工作。然而，在 Internet Explorer（在 IE11 上测试）中，虽然它确实将 div 居中在窗口中间，但 IE 似乎认为仍然有一个不可见的 'ghost div' 50% 和 50% 向下没有被转换。
This results in a whole bunch of white overflow space and unnecessary scrollbars in the bottom right corner of the screen. If I turn on overflow: hidden, this can fix the issue, but it is not a feasible option in my website.
这会导致屏幕右下角出现一大堆白色溢出空间和不必要的滚动条。如果我打开溢出：隐藏，这可以解决问题，但这在我的网站中不是一个可行的选择。
So why does IE do this and is there an easy way to get around it?
那么为什么 IE 会这样做，是否有一种简单的方法可以绕过它？
EDIT: The following code illustrates the problem. Open the code in Chrome or Firefox, there is no overflow. Open it in IE (testing in IE11) and you will see overflow causing white space and scroll bars to the bottom and to the right.
编辑：下面的代码说明了这个问题。在 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>
回答by Sampson
Easier Approach
更简单的方法
Instead of positioning from the topand left, position instead from the bottomand right. After you've done this, simply change your -50%translations to positive 50%. This will remove the overflow e.g.
不是从topandleft定位，而是从bottomand定位right。完成此操作后，只需将-50%翻译更改为 positive 50%。这将删除溢出，例如
.center-center {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
You can see these changes in action here: http://jsfiddle.net/bd17gsss/
你可以在这里看到这些变化：http: //jsfiddle.net/bd17gsss/
It's worth noting that this bug is still filed, and our team will still give it the appropriate consideration when time and cycles permit us to do so.
值得注意的是，这个bug仍然被归档，当时间和周期允许我们这样做时，我们的团队仍然会给予适当的考虑。
Original Answer
原答案
There appears to be a layout bug with position: absolutein this particular demo. It's behaving similar to position: relativewhen it shouldn't be. I've opened a bug on this issue for the Internet Explorer team to investigate further.
position: absolute在这个特定的演示中似乎有一个布局错误。它的行为与position: relative不应该的行为相似。我已针对此问题打开了一个错误，供 Internet Explorer 团队进一步调查。
For now, you could switch your position value from absoluteto fixed, which appears to render the centered element correctly. This prevents you from having to use a fixed set of dimensions over and over, and instead allows you to use this approach as a general-purpose .modalstyle class that will center anything it is applied to.
现在，您可以将位置值从 切换absolute到fixed，这似乎可以正确呈现居中元素。这使您不必一遍又一遍地使用一组固定的维度，而是允许您将此方法用作通用.modal样式类，将其应用到的任何内容居中。
The obvious caveat with this change is that your element is positioned according to the viewport, and no longer the document itself. This will freeze it on the screen effectively.
此更改的明显警告是您的元素是根据视口定位的，而不再是文档本身。这将有效地将其冻结在屏幕上。
.modal {
position: fixed;
top: 50%; left: 50%;
background-color: red;
transform: translate(-50%, -50%);
}
To demonstrate the success this approach has with various dimensions, we can cycle through a few example sets and test the rendering of the element to ensure it is properly centered:
为了证明这种方法在各种维度上取得的成功，我们可以循环浏览一些示例集并测试元素的渲染以确保其正确居中：
(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 );
}());
The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/c00u5ev8/
最终结果可以在这里在线查看：http: //jsfiddle.net/jonathansampson/c00u5ev8/
回答by JacDek
If anyone else is still having fun trying to work around this issue (seeing as Internet Explorer bugs never get fixed because we all love having to work around them instead), and you'd like to be able to use position: relative;instead of position: absolute;, or top and left rather than bottom and right, try this instead:
如果其他人仍然乐于尝试解决这个问题（看到 Internet Explorer 错误永远不会得到修复，因为我们都喜欢不得不解决它们），并且您希望能够使用position: relative;而不是position: absolute;，或顶部和左边而不是底部和右边，试试这个：
.centredDiv {
position: relative;
top: calc(50% - 100vh);
left: calc(50% - 100vw);
transform: translate(-50%, -50%) translate(100vw, 100vh);
}
You can use 100 view height/view width or an arbitrary pixel value representing a maximum theoretical scroll height/width so that the top/left values would never conceivably overflow the parent, and then just offset that in the transform.
您可以使用 100 视图高度/视图宽度或代表最大理论滚动高度/宽度的任意像素值，以便顶部/左侧值永远不会溢出父级，然后在转换中偏移它。
If I was in an elevator with Hitler, Stalin, and Internet Explorer, and I had a gun with only 1 bullet... I would kill Internet Explorer.
如果我和希特勒、斯大林和 Internet Explorer 一起在电梯里，我有一把只有 1 颗子弹的枪……我会杀死 Internet Explorer。
回答by Reinier Kaper
If actually just answered this very question in another thread, you can use display: table;and display: table-cell;to solve this issue (works cross-browser as well!), see my live code here: http://codepen.io/TheDutchCoder/pen/GggWqP
如果实际上只是在另一个线程中回答了这个问题，您可以使用display: table;并display: table-cell;解决这个问题（也可以跨浏览器工作！），请在此处查看我的实时代码：http: //codepen.io/TheDutchCoder/pen/GggWqP
In your case it would be:
在您的情况下，它将是：
#wrapper {
display: table;
width: 100%;
height: 100%;
}
#centred {
display: table-cell;
vertical-align: middle;
text-align: center;
}
回答by BI Developer
For me, the issue with translate not working in IE 11 was simply that the page was automatically running in compatibility mode, causing IE 11 to run as if it were an older browser, which does not support translate in CSS.
对我来说，翻译在 IE 11 中不起作用的问题只是页面自动以兼容模式运行，导致 IE 11 像旧浏览器一样运行，不支持在 CSS 中翻译。
My fix was simply to put this tag in the head:
我的解决办法只是把这个标签放在头上：
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
....
This tells IE to run in using the "latest" code, which essentially means that IE 11 renders the page with IE 11 code and not as an older version of the browser.
这告诉 IE 使用“最新”代码运行，这实质上意味着 IE 11 使用 IE 11 代码呈现页面，而不是作为旧版本的浏览器。
If you want to freeze the compatibility to some specific version of IE you can do that to with this tag, by using different "content" values. The value "IE-Edge" tells it to use the latest code available.
如果您想冻结与某些特定版本的 IE 的兼容性，您可以通过使用不同的“内容”值来使用此标签。值“IE-Edge”告诉它使用可用的最新代码。
If you want to see if your page is being rendered in compatibility mode, press F12 to bring up Developer Tools in the browser, switch to the "Console" tab, and reload the page. The console tab will say something like:
如果您想查看您的页面是否以兼容模式呈现，请按 F12 在浏览器中调出开发人员工具，切换到“控制台”选项卡，然后重新加载页面。控制台选项卡将显示如下内容：
http://yoursite.com is running in Compatibility View because ...
if it is indeed running in compatibility mode.
如果它确实在兼容模式下运行。
回答by Hieu Tran AGI
Just add transition: all .2s ease-in-out;below your transform line.
只需transition: all .2s ease-in-out;在转换线下方添加。
回答by Douglas Denhartog
Your code is too abbreviated and with no working example it is hard to offer any advice. I am concerned about the (some dynamic height/width)part, i.e. this strikes me as a place where your problem could be.
您的代码过于简短，而且没有工作示例，很难提供任何建议。我很担心这(some dynamic height/width)部分，即这让我觉得你的问题可能出在那里。
For your reference, you can check out Microsoft's own explanation of Transform in IE.
