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

我正在使用以下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中测试),你会看到溢出导致空白和滚动条到底部和右边.

  
    
     
   
 
   

     

       Hello world!
     
   
 
 

Sampson.. 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 );

}());