CSS：除非我在 IE8 中指定背景颜色，否则超链接框不可单击

Question

我正在尝试制作一个 256x256px 透明可点击框，位于 3 层之上，可以打开/关闭（只是状态显示）。我给 3 层的 z 索引为 -1，超链接框的 z 索引为 5，所以它应该位于顶部。这段代码在 Chrome 和 Firefox 中运行良好。奇怪的是，如果我为状态链接设置背景颜色，它就会显示并且可以单击。这是我的 CSS 文件：

.layer{position: absolute;left: 0px;top: 0px;z-index: -0;}
.map{position: absolute;left: 0px;top: 0px;z-index: 1;}
.headerarea{height: 200px; width: 100%; }
.header{ position: relative; text-align: center; width: 100%; }
.bodyarea{position: relative; width: 100%; height: 1000px;}
#logo1{float: left;border: 1px solid #dcdce9;}
#logo2{float: right;border: 1px solid #dcdce9;}
.roomlist ul{list-style: none; padding: 0;margin: 0; position: relative; }
.roomlist li{margin: 0 0.15em; float: left; position: absolute;}
#floor1{left: 0px;top: 0px;}
#floor2{left: 300px;top: 0px;}
.statuslink{ position: absolute; top: 30px; height: 256px; width: 256px; z-index: 5;}
.statusimg{position: absolute;left: 0px;top: 30px;z-index: -0; }
.menu{width:30em;position: absolute;left: 860px;top: 20px;}
.menu ul{list-style: none;padding: 0;margin: 0;}
.menu li{margin: 0 0.15em;}
.menu li a{background-color: white;height: 5em;line-height: 5em;width: 15em;display: block;border: 1px solid #dcdce9;color: #0d2474;text-decoration: none;text-align: center;}
.menu li a:hover{background-color: #dcdce9;height: 5em;line-height: 5em;width: 15em;display: block;border: 1px solid black;color: #0d2474;text-decoration: none;text-align: center;}
#loading {width: 300px;height: 100px;background-color: white;position: absolute;left: 20%;top: 40%;text-align: center;border: 4px solid #999999;z-index: 10;}
img{  border-style: none;}
body { font-family: Verdana; }
.led{position: absolute;}

这是我的 HTML：

9.<div class="bodyarea">
10.        <div class="roomlist">
11.                <ul>
12.                        <li id="floor1"><b>Floor 1</b><br />
13.                        <a class="statuslink" href="C51a-bld.htm"></a>
14.                        <div class="statusimg" id="f1okon">
15.                                <img src="ok_on.gif" /></a>
16.                        </div>
17.                        <div class="statusimg" id="f1okoff">
18.                                <img src="ok_off.gif" /></a>
19.                        </div>
20.                        <div class="statusimg" id="f1fail">
21.                                <img src="fail.gif" /></a>
22.                        </div>
23.                        </li>
24.                        <li id="floor2"><b>Floor 2</b><br />
25.                        <a class="statuslink" href="C52a-bld.htm"></a>
26.                        <div class="statusimg" id="f2okon">
27.                                <img src="ok_on.gif" /></a>
28.                        </div>
29.                        <div class="statusimg" id="f2okoff">
30.                                <img src="ok_off.gif" /></a>
31.                        </div>
32.                        <div class="statusimg" id="f2fail">
33.                                <img src="fail.gif" /></a>
34.                        </div>
35.                        </li>
36.                </ul>
37.        </div>
38.</div>

请有人指导我正确的方向。我的CSS知识很薄弱。

Answer 1

看起来您的 链接位于绝对定位的 div 之外。当 Div 重新定位它们时，链接不知道去哪里。

另外，您似乎还有一些额外的 标签。比较下面的源代码以查看更改。

<div class="bodyarea">
        <div class="roomlist">
                <ul>
                        <li id="floor1"><b>Floor 1</b><br />                        
                            <div class="statusimg" id="f1okon"><a class="statuslink" href="C51a-bld.htm"><img src="ok_on.gif" /></a></div>
                            <div class="statusimg" id="f1okoff"><a class="statuslink" href="C51a-bld.htm"><img src="ok_off.gif" /></a></div>
                            <div class="statusimg" id="f1fail"><a class="statuslink" href="C51a-bld.htm"><img src="fail.gif" /></a></div>
                        </a>
                        </li>
                        <li id="floor2"><b>Floor 2</b><br />
                        <a class="statuslink" href="C52a-bld.htm">
                            <div class="statusimg" id="f2okon"><img src="ok_on.gif" /></div>
                            <div class="statusimg" id="f2okoff"><img src="ok_off.gif" /></div>
                            <div class="statusimg" id="f2fail"><img src="fail.gif" /></div>
                        </a>
                        </li>
                </ul>
        </div>
</div>