Question

我有一个相对定位的DIV。整个DIV需要链接到另一个页面。

我正在做的是在div中添加一个链接并将此CSS应用于它：

.f170region .linkcover {
    background: #FFF;
    bottom: 0;
    display: block;
    filter: alpha(opacity=0);
    hasLayout: true;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
}

在IE6以外的所有浏览器中，这样做会使链接充当DIV上的可点击层。该链接还添加了.ir类，以隐藏屏幕内链接内的文本：

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

任何人都有一个解决方案，让它在IE6中工作。请不要给我关于支持IE6的讲座。我和你在一起。

以下是使用此方法的HTML：

    <div class="alpha omega grid_4 f170region white" id="home_bg_youthzone">
        <h2 class="hidden">Youth Zone</h2>
        <div class="copy">There are many ways for younge residents to get help and support. Find out more...</div>
        <div class="getin">
            <p><span class="pink">Get</span><br />involved</p>
            <p><span class="pink">Get</span><br />in the zone</p>
        </div>
        <a class="linkcover ir" href="<?php echo site_url("/youth-zone/"); ?>" title="Go to Youth Zone">Go to Youth Zone</a>
    </div>

编辑2：

http://jsfiddle.net/9gSUd/

Answer 1

我找到了使用spacer.gif文件作为BG的解决方案。我正在使用此修复程序使叠加层在IE http://kevindees.cc/2011/01/ie-adjacent-positioning-image-and-link-overlap-css-fix/

中正常工作

这会将BG设置为白色，但将不透明度设置为0.这适用于IE的所有版本，但IE6。通过将背景设置为spacer.gif而不是白色并将链接的宽度/高度设置为100％，我在IE6和所有浏览器中都获得了可行的解决方案。这是我链接的最终CSS：

.f170region .linkcover {
    background: url(../images/spacer.gif) no-repeat 0 0;
    bottom: 0;
    display: block;
    filter: alpha(opacity=0);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}

Answer 2

设置锚点以显示block以及width和height 100%即使在IE6中也可以。

div{
    width:100px;
    height:100px;
    border:1px solid green;
}

a{
    display:block;
    width:100%;
    height:100%;
}

示例：http://jsfiddle.net/Kkjdw/

<强>更新

鉴于要求锚点覆盖当前div中的所有内容，这是一个更新的示例：

http://jsfiddle.net/Kkjdw/1/

CSS链接覆盖在IE6中不起作用

2 个答案: