Question

以下代码加载的“关闭窗口”图像是可点击的。当页面加载时，一切都正常显示，但可点击的区域只有几个像素宽，一个像素或两个高，正好在图像中心的下方和正上方。我已经包含了一些代码和相关的CSS。

在IE9模式下，所有工作都可以正常使用IE9（整个图像都是可点击的）。但我提到的症状 - 图像中没有的微观可点击区域出现在Firefox 7，Chrome，Safari和Opera中。

我尝试在图像中使用onclick并尝试将类声明放在链接标记中，但同样的事情发生了。我也试过了：

a {
display: block;
border: 1px solid white;
text-align: center;
}

我怀疑当你们中的一个人指出我的方式错误时，我会感到非常愚蠢。

我很难过。

.advCloser {
float: right;
padding: 5px 5px 0px 0px;
}
.advTitle {
position: relative;
top: -10px;
font-size: 125%;
padding: 0px 0px 0px 5px;
color: DarkBlue;
}

<div><a href="javascript:advConfigPageOpen();"><img src="images/closeWindow.png" alt="Close window" class="advCloser"/></a><br/><div class="advTitle">Advanced configuration page</div></div>

Answer 1

如果你浮动a标签而不是图像，你可能会得到更好的结果，我也会将a标签设置为与图像具有相同宽度和高度的块。这应该使它与所有浏览器一致。

<style type="text/css">
    .advCloser {
        display: block;
        height: 50px; /* set to the height of the image.*/
        width: 50px; /* set to the width of the image.*/
        float: right;
        padding: 5px 5px 0px 0px;
    }
    .advTitle {
        position: relative;
        top: -10px;
        font-size: 125%;
        padding: 0px 0px 0px 5px;
        color: DarkBlue;
    }
<style>
<div>
    <a class="advCloser" href="javascript:advConfigPageOpen();">
        <img src="images/closeWindow.png" alt="Close window" />
    </a>
    <br />
    <div class="advTitle">Advanced configuration page</div>
</div>

在不编辑现有课程的情况下，可以采用一种轻微的替代方案：

<style type="text/css">
    .advCloser {
        float: right;
        padding: 5px 5px 0px 0px;
    }
    .advTitle {
        position: relative;
        top: -10px;
        font-size: 125%;
        padding: 0px 0px 0px 5px;
        color: DarkBlue;
    }
    .block-link {
        display: block;
        height: 50px; /* set to the height of the image.*/
        width: 50px; /* set to the width of the image.*/
    }
<style>
<div>
    <a class="block-link" href="javascript:advConfigPageOpen();">
        <img src="images/closeWindow.png" alt="Close window" class="advCloser" />
    </a>
    <br />
    <div class="advTitle">Advanced configuration page</div>
</div>

Answer 2

尝试为图像添加宽度。希望这会在兼容的浏览器中提供链接标记。

屏幕上的href和onclick区域微乎其微且位置错误

2 个答案: