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

仅为IE 8版本添加新的CSS文件，复制相同的CSS名称并相应地进行修改。在评论标记内的html页面中添加文件。像

<!--[if lte IE 8]>

<![endif]-->

无论浏览器如何，CSS Div都会在屏幕中心显示

2 个答案: