html - HTML anchor 内的图像会产生不需要的人工制品

Question

我现在正在处理一个非常基本的 header ，由于某些未知原因，其中带有图像标签的 anchor 会创建一些不需要的人工制品，如以下打印屏幕所示:

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

这是来自 anchor (a href) 的下划线，因为链接始终带有标准下划线。

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

---

将它放在 CSS 中的两个 anchor 上，像这样:

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