Question

我对CSS比较陌生，但一直在取得很大的进步。我虽然对此感到茫然，但在搜索时似乎无法找到答案。我的小网站在Chrome上按预期工作，但在IE中却没有。我有一个div，我将zIndex设置为-1使其消失。单击一个按钮时，我将其设置为100以将其弹回到前面。在Chrome中，这就像一个魅力。在IE中，它不是显示div，而是使页面空白并在页面顶部显示“100”。如果我尝试使用display而不是zIndex，IE只会打印我设置显示值的任何内容并擦除页面。

    <!DOCTYPE html>
<html">
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>My Page</title>
    </head>
    <body style="height:99%; width:99.8%;" onLoad="init();">
        <input type="file" id="files" name="files[]" style="visibility: hidden; position: absolute; top: -50; left: -50" />
        <div id="topbuttons" style="visibility: hidden;">
            <a href="javascript:document.getElementById('optionspanel').style.zIndex=100" class="bluebuttons" id="btnShowOptions">Show Options</a>
        </div>
        <div id="map-canvas" style="float:left; width: 75%; height: 95%;"></div>
        <div id="optionspanel" style="position:absolute; top: 50px; left: 50px; background-color: white; border: 1px solid black; box-shadow: 5px 5px gray">
            panel stuff
        </div>
        <div id="rightpanel" style="float:right; width: 25%;">
            <div id="sidecelltop"></div>
            <div id="sidecell" style="text-align: center">
                <select id="radiuslist" name="radiuslist" multiple style="visibility: hidden"></select>
            </div>
        </div>
        </table>
    </body>
</html>

单击按钮时，optionspanel的zIndex设置为-1，并显示Google地图，同时显示屏幕顶部的选项按钮。单击选项按钮时，只需将optionspanel的zIndex设置为100.但在IE中，它在窗口顶部显示“100”，其他一切都消失了。 =（

我做错了什么？

提前感谢您的帮助！

CS

Answer 1

不要将z-index设置为-1。最好将该元素设置为display：none。此外，您的代码中发生了很多疯狂的事情。我把它清理了一下。如果没有你所有的额外语法，IE应该更喜欢这个。这应该是获得所需功能的更好起点。

   <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Page</title>
        <style>
            body{
                width: 100%;
            }
            #files{
                visibility: hidden; 
                position: absolute; 
                top: -50; 
                left: -50;
            }
            #radiuslist{
                visibility: hidden;
            }
            #optionspanel{
                position:absolute; 
                top: 50px; 
                left: 50px; 
                background-color: white; 
                border: 1px solid black; 
                box-shadow: 5px 5px gray;
                display: none;
            }
            #map-canvas{
                float:left; 
                width: 75%; 
                height: 95%;
            }
            #rightpanel{
                float:right; 
                width: 25%;
            }
        </style>
    </head>
    <body>
        <input type="file" id="files" name="files[]"/>
        <div id="topbuttons">
            <span id="showOptions" class="bluebuttons">Show Options</span>
        </div>
        <div id="map-canvas"></div>
        <div id="optionspanel">
            panel stuff
        </div>
        <div id="rightpanel">
            <div id="sidecelltop"></div>
            <div id="sidecell" style="text-align: center">
                <select id="radiuslist" name="radiuslist" multiple></select>
            </div>
        </div>
    </body>
    <script>
        var show = document.getElementById('showOptions');
        show.onclick = function(){
            document.getElementById('optionspanel').style.display = 'block';
        };
    </script>
</html>

z索引和显示属性不行为

1 个答案: