CSS Div для отображения в центре экрана независимо от браузера

Question

Я пытаюсь сделать div-шоу поверх текущего содержимого страницы, расположенной по центру страницы. Он прекрасно работает в Chrome, но когда я тестирую старые версии IE (8), верхний левый угол отображается в центре экрана, а не в центре div в центре экрана. Любая идея, что не так с моим CSS, заставляя IE поставить верхний левый в середине экрана?

Я попытался изменить любое количество переменных, но это заставляет его терпеть неудачу в Chrome.

.PopupPanel 
{ 
    border: solid 2px black; 
    position: fixed; 
    background-color:#FFFFFF; 
    z-index: 100000; 
    border-radius: 10px; 
    padding:10px; 
    overflow: auto; 

    left: 50%; 
    top: 50%; 

    transform: translate(-50%, -50%); 

    width: 90%; 
    height: 90%; 
    box-shadow: 10px 10px 5px #888888; 
} 
....... 
<div class="PopupPanel" id="sr_compose_popup" name="sr_compose_popup" style="display:none;"> 
    <input type="button" value="Close" onclick="close_pop_up_window();"> 
    <hr> 
    <div id="div_popup_below_line"></div> 
</div> 

Answer 1

Поскольку IE8 не понимает CSS transform. Вы могли бы использовать этот трюк для позиционированного элемента, который также должен хорошо работать и в старых браузерах.

.PopupPanel{ 
    border: solid 2px black; 
    position: fixed; 
    background-color:#FFFFFF; 
    z-index: 100000; 
    border-radius: 10px; 
    padding:10px; 
    overflow: auto; 

    margin: auto; /*new*/ 
    left: 0; right: 0; top: 0; bottom: 0; /*new*/ 

    width: 90%; 
    height: 90%; 
    box-shadow: 10px 10px 5px #888888; 
} 

http://jsfiddle.net/12t5gh42/

Answer 2

Добавить новый файл CSS только для версии IE 8, скопировать одно и то же имя CSS и соответствующим образом изменить его. Добавьте файл на страницу html внутри тега комментария. например

<!--[if lte IE 8]> 

<![endif]-->