HTML锚点内的图像会创建不需要的人工制品

Question

我有一个非常基本的标题，我现在正在处理，由于一些未知的原因，在其中有图像标记的锚点会产生一些不需要的人工制品，如下面的打印屏幕：

Image Link

HTML

<div class="block-content">
    <form method="get" id="header-searchform" class="search-form search-button-hidden" action="http://klarparatsy.stof2000.dk/" _lpchecked="1">
        <div>
            <input id="search" class="field" type="text" name="s" value="" placeholder="Indtast søgeord">
        </div>
    </form>
    <a id="stof2000-logo" href="http://klarparatsy.stof2000.dk/">
        <img src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/stof2000logo.png" alt="Stof 2000">
    </a>
    <a id="klarparatsy-logo" href="http://klarparatsy.stof2000.dk/">
        <img src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/klarparatsy-logo.png" alt="Stof 2000">
    </a>
    <img id="homemade-logo" src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/homemade-logo.png" alt="Stof 2000">
</div>

CSS

#stof2000-logo {
    position: relative;
    top: 39px;
    left: 80px;
}
#klarparatsy-logo {
    position: relative;
    top: 41px;
    left: 143px;
}

人工制品是在图像边界旁边创建的，我无法在代码中看到问题所以任何指导都不过是受欢迎的。我知道这是一个小问题，但目前非常令人沮丧......

Answer 1

这是锚点（a href）的一个下划线，因为链接总是标有下划线。

text-decoration:none;应该修复它。

---

将它放在CSS中的两个锚点上，如下所示：

#stof2000-logo {
    position: relative;
    top: 39px;
    left: 80px;
    text-decoration:none;
}

Answer 2

锚点通常用下划线标出。这就是为什么你得到这个＆＃34;人工制品＆＃34;。 您可以使用

从页面上的所有锚点中删除该行

a {text-decoration: none;}

或者甚至只是包含图片的人，如下：

#stof2000-logo, 
#klarparatsy-logo { text-decoration: none; }

Answer 3

在图像和链接中，它总是更好，所以将图像设置为块元素：

.block-content img {
    display: block;
    float: left;
}

.block-content a,
.block-content a:link,
.block-content a:visited {
    padding: 0;
}

直接在img-elements的样式中使用width和padding来定位它们。