Azz*_*ude 22 css internet-explorer transform
我正在使用以下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似乎认为仍有一个看不见的'ghost div'50%和50%down尚未转换.
这会在屏幕的右下角产生一大堆白色溢出空间和不必要的滚动条.如果我打开溢出:隐藏,这可以解决问题,但它在我的网站中不是一个可行的选项.
那么为什么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>
Sam*_*son 27
更简单的方法
而不是从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/
小智 5
如果其他人仍然乐于尝试解决这个问题（看到 Internet Explorer 错误永远不会得到修复，因为我们都喜欢不得不解决它们），并且您希望能够使用position: relative;而不是position: absolute;，或顶部和左边而不是底部和右边，试试这个：
.centredDiv {
position: relative;
top: calc(50% - 100vh);
left: calc(50% - 100vw);
transform: translate(-50%, -50%) translate(100vw, 100vh);
}
您可以使用 100 视图高度/视图宽度或代表最大理论滚动高度/宽度的任意像素值，以便顶部/左侧值永远不会溢出父级，然后在转换中偏移它。
如果我和希特勒、斯大林和 Internet Explorer 一起在电梯里，我有一把只有 1 颗子弹的枪……我会杀死 Internet Explorer。
| 归档时间： |
|
| 查看次数： |
21581 次 |
| 最近记录： |