在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中工作的居中模態

回答

相關問題