在IE8中工作的居中模态

我想中心我的模态，我有以下代码http://jsfiddle.net/be34jkzk/4/在IE8中工作的居中模态

这就是我的代码。我只是想确保模态集中并且有点敏感。我尝试将modalPopupClass的代码更改为这样的东西，但它在IE8上显示它很奇怪。

CSS：

.modalPopupClass{ 
    display:none; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 50%; 
    max-width: 630px; 
    min-width: 320px; 
    height: auto; 
    z-index: 4020; 
    transform: translateX(-50%) translateY(-50%); 
    }

来源

2014-09-24 Amir Shadaab Mohammed

'transform'不会在IE8工作... AFAIK。 – 2014-09-24 16:22:30

PS：我添加了JavaScript作为内联脚本，至少没有更多的控制台错误：http://jsfiddle.net/be34jkzk/2/ – ne1410s 2014-09-24 16:23:17

[在caniuse.com上IE8变换的大红色块]（http ：//caniuse.com/#search=transform） – misterManSam 2014-09-24 16:23:32

这里是保持流体的高度和宽度的div死点垂直和水平的技术。在IE8兼容+

这是可能与margin: auto组合和top: 0; left: 0; bottom: 0;和right: 0;
使用百分比宽度和高度之间的拔河战（它需要一个高度）
使用最小/最大宽度和最小/最大高度

EXPE的组合为您的项目获得最佳结果。

Here is a write up on the technique over on Smashing Magazine

CSS/HTML /演示

.dead-center { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background: #F00; 
 
    height: 50%; 
 
    width: 50%; 
 
    min-width: 100px; 
 
    min-height: 100px 
 
}

<div class="dead-center"></div>

来源

2014-09-24 16:37:17 misterManSam

在IE8中工作的居中模态

回答

相关问题