javascript - 图片在点击时移动了 1px 以上

Question

所以，我使用这个 Javascript 来隐藏 - 显示效果：

function effect(id) {
    var h = document.getElementById(id);
    h.style.display = ((h.style.display != 'none') ? 'none' : 'inline');
}

HTML：

<div class="div">
    <a href="#" onclick="effect('h');"><img src="http://i.imm.io/1jf2j.png"/></a>
    <a href="index.php" class="url" id="h">Home</a>
</div>

和 CSS：

.div {
    background: #000;
}
.div .url {
    font-size: 17px;
}

在这里您可以测试（和编辑！）代码：http
: //codepen.io/anon/pen/dhHiw JSFiddle 对我不起作用。

一切都很好。除非您单击图像。它在上方移动了 1px。我应该使用其他图像吗？
哪里有问题？以及可能的解决方案。谢谢！

Answer 1

您基本上是在删除文本元素。由于<div class="div">没有设定高度，它取决于其中的元素。当文本不显示（display=none）时，div 将调整为仅图像。

您可以通过设置 div 的高度或设置visibility=hidden文本而不是display=none. 使其隐藏时，它仍然具有相同的尺寸，但它是不可见的。