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

Question

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

图片链接

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