CSS3转换属性在Internet Explorer中的工作方式不同 [英] CSS3 transform property working differently in Internet Explorer
问题描述
我正在使用以下CSS将div居中放置在页面中间：
I am using the following CSS to centre a div in the middle of my page:
.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％，尚未进行转换。
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.
这会在屏幕的右下角产生一堆白色的溢出空间和不必要的滚动条。如果我打开溢出：隐藏，这可以解决问题，但是在我的网站上这不是可行的选择。
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.
那么IE为什么要这样做，并且在那里
So why does IE do this and is there an easy way to get around it?
编辑：以下代码说明了该问题。在Chrome或Firefox中打开代码，没有溢出。在IE中打开它（在IE11中进行测试），您将看到溢出导致空白，并在底部和右侧滚动条。
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.
<!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>
推荐答案
更简单的方法
而不是从顶部和左侧定位从底部和右开始。完成此操作后，只需将您的 -50％转换为正的 50％。
Instead of positioning from the top and left, position instead from the bottom and right. After you've done this, simply change your -50% translations to positive 50%. This will remove the overflow e.g.
.center-center {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
您可以在此处查看这些更改： http://jsfiddle.net/bd17gsss/
You can see these changes in action here: 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.
原始答案
在此特定演示中，似乎存在一个布局错误，其位置为：绝对。它的行为类似于 position：relative 。我已经为Internet Explorer团队打开了一个有关此问题的错误，以供进一步研究。
There appears to be a layout bug with position: absolute in this particular demo. It's behaving similar to position: relative when it shouldn't be. I've opened a bug on this issue for the Internet Explorer team to investigate further.
现在，您可以将绝对值从转换为绝对值到已修复，这似乎可以正确呈现居中的元素。这避免了您不得不反复使用一组固定的尺寸，而是允许您将此方法用作通用的 .modal 样式类，以将所有内容居中
For now, you could switch your position value from absolute to 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 .modal style class that will center anything it is applied to.
此更改的明显警告是您的元素根据视口定位，而不再是文档本身。
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 );
}());
可以在此处在线查看最终结果： http://jsfiddle.net/jonathansampson/c00u5ev8/
The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/c00u5ev8/
这篇关于CSS3转换属性在Internet Explorer中的工作方式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
