Question

请查看下面的代码。如果您查看正文图表，每种颜色代表右侧的不同内容。但是，这些链接在IE中不起作用，我假设由于我写的CSS。

有人能说明我如何在IE中复制这个内容吗？

HTML：

<div id="male">
    <img src="male1.png" alt="male1 Compensation Calculator" title="male" width="130" height="300" class="alignleft size-full wp-image-117" /></p>
    <div class="head"><span class="whole fakelink"></span></div>
    <div class="neck"><span class="whole fakelink"></span></div>
    <div class="arm1"><span class="whole fakelink"></span></div>
    <div class="arm2"><span class="whole fakelink"></span></div>
    <div class="torso"><span class="whole fakelink"></span></div>
    <div class="legs"><span class="whole fakelink"></span></div>
</div>

CSS：

div.head {
    position: absolute;
    width: 70px;
    margin-left: 31px;
    height: 70px;
}
div.neck {
    position: absolute;
    height: 6px;
    width: 18px;
    margin: 70px 0px 0px 56px;
}
div.arm1 {
    position: absolute;
    height: 105px;
    width: 30px;
    margin: 77px 0px 0px 100px;
}
div.arm2 {
    position: absolute;
    height: 105px;
    width: 30px;
    margin: 77px 0px 0px 0px;
}
div.torso {
    position: absolute;
    height: 118px;
    width: 70px;
    margin: 77px 0px 0px 31px;
}
div.legs {
    position: absolute;
    height: 105px;
    width: 69px;
    margin: 195px 0px 0px 31px;
}
.whole {
    width:100%;
    height:100%;
    display:block;
}
.fakelink {
    color:white;
    font-weight:bold;
}
.fakelink:hover {
    cursor: pointer;
    text-decoration:none;   
}

Answer 1

我只知道解决这个问题的两个解决方案，尽管它们最终都归结为需要背景：

选项1
在background-color上设置一个不透明的.fakelink。虽然显然在你的情况下，这将不是非常有用，它将说明背景的必要性。

如果您只需要支持IE9，我建议使用低alpha不透明度的rgba：

.fakelink{ background-colour: rgba(255,255,255,0.01) }

选项2
使用小的透明.png或.gif格式并将其平铺为background-image的{{1}}

如何让这些CSS绝对位置在IE中工作？

1 个答案: