CSS z-index/javascript 在三种主要浏览器中的工作方式不同

CSS z-index/javascript working differently in the three major browsers

本文关键字：浏览器 方式不 工作 三种 javascript z-index CSS      更新时间：2023-09-26

在这里托管它，因此您可以看到行为。 （仅前两个键，最左边的白键和旁边的黑键）

http://23.23.184.26/miller/cssz/main.html

在铬 （19.-） 中工作得很好在 Firefox （12.0） 中生成蓝色光晕（选择？）框在IE9中根本不起作用

有什么建议吗？

<html>
    <head>
        <style type="text/css">
            #main {
                position:absolute;
                left:0px;
                top:0px;
                z-index:100
            }
            #key1 {
                position:absolute;
                left:0px;
                top:0px;
                z-index:98
            }
            #key2 {
                position:absolute;
                left:0px;
                top:0px;
                z-index:98
            }
            #key1zone {
                position:absolute;
                width:50px;
                height:75px;
                top:175px;
                left:55px;
                z-index:200
            }
            #key2zone {
                position:absolute;
                width:50px;
                height:75px;
                top:100px;
                left:85px;
                z-index:200
            }
            /*uncomment this to show button zones*/
            #key1zone:hover, #key2zone:hover {
                border:1px solid red;
            }
        </style>
        <script type="text/javascript">
            function keyDown(key) {
                document.getElementById(key).style.zIndex = "102";
            }
        </script>
        <script type="text/javascript">
            function keyUp(key) {
                document.getElementById(key).style.zIndex = "98";
            }
        </script>
    </head>
    <body>
        <div id="key1zone" onMouseDown="keyDown('key1')" onMouseUp="keyUp('key1')"
        onMouseOut="keyUp('key1')"></div>
        <div id="key2zone" onMouseDown="keyDown('key2')" onMouseUp="keyUp('key2')"
        onMouseOut="keyUp('key2')"></div>
        <img id="main" src="0.gif" width="506" height="319">
        <img id="key1" src="1.gif" width="506" height="319">
        <img id="key2" src="2.gif" width="506" height="319">
    </body>
</html>

将指向不存在图像的背景图像添加到div：-

#key1zone {
    background-image:url('nosuchimage.jpg');
    Z-INDEX: 200; POSITION: absolute; WIDTH: 50px; HEIGHT: 75px; TOP: 175px; LEFT: 55px
}

这解决了关键问题。测试通过IE8。

要解决 Firefox 中的光环问题，请将所有 IMG 替换为 DIV：-

#main {
    background-image:url('0.gif');
    Z-INDEX: 100; POSITION: absolute; TOP: 0px; LEFT: 0px;
    width:506px;height:319px;
}
#key1 {
    background-image:url('1.gif');
    Z-INDEX: 98; POSITION: absolute; TOP: 0px; LEFT: 0px;
    width:506px;height:319px;
}
#key2 {
    background-image:url('2.gif');
    Z-INDEX: 98; POSITION: absolute; TOP: 0px; LEFT: 0px;
    width:506px;height:319px;
}
<div id="main"></div>
<div id="key1"></div>
<div id="key2"></div>

我会提出以下建议。它使用更短的CSS，一些内联样式，JavaScript预加载图像，并且没有事件处理程序属性，但通过脚本设置它们。另外，我给#image一个背景图像，应该避免任何闪烁。然后，您也可以使用透明的按键图像。

<html>
    <head>
        <style type="text/css">
            #main {
                position:relative;
            }
            .keyzone {
                position:absolute;
                z-index:1; /* one above is enough */
                width:50px; height:75px; /* all keys sharing their dimensions? */
            }
            .keyzone:hover {
                background: red;
                opacity: 0.3; /* or use rgba() for modern browsers */
            }
            #image {
                background: url('0.gif'); /* avoid flicker */
            }
        </style>
        <script type="text/javascript">
            function load(path) {
                 var img = new Image();
                 img.src = path;
                 return img;
            }
            var images = {
                // element id := Image to show
                key1: load("0.gif"),
                key2: load("1.gif")
            }; /* use a loop when everything is the same - but you
                  can also use more descriptive names with this map solution */
        </script>
    </head>
    <body>
        <div id="main">
            <img id="image" src="0.gif" width="506" height="319">
            <div id="key1" class="keyzone" style="top:175px; left:55px; /*width:50px; height:75px;*/"></div>
            <div id="key2" class="keyzone" style="top:100px; left:85px; /*width:50px; height:75px;*/"></div>
        </div>
        <script type="text/javascript">
            // I'm too lazy to use a onDOMready listener, so I just put the script after the elements
            var img = document.getElementById("image");
            function keyUp() {
                img.src = "0.gif";
            }
            function prevent(e) {
                e.preventDefault();
                return false;
            }
            function makeKeyHandler(keyEl, src) {
                keyEl.onmousedown = function keyDown() {
                   img.src = src;
                };
                keyEl.onmouseup = keyEl.onmouseout = keyUp; // resetter
                keyEl.onclick = prevent; // no selection on doubleclick etc.
            }
            for (var id in images) // see object declaration above
                makeKeyHandler(document.getElementById(id), images[id].src);
        </script>
    </body>
</html>

有关工作变体，请参阅 http://jsfiddle.net/LSgF4/

相关文章：