html - 屏幕上的 href 和 onclick 区域很小且位置错误

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

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

<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>