Question

请在此处查看代码.. JS Fiddle。有一个特殊的问题是在第一张图像之后出现了蓝色下划线。为什么会这样？请注意，只需删除href即可消失。非常奇怪的问题。该怎么办？

HTML：

<body>
    <div id="top-bar"> 
        <a target="_blank" href="https://twitter.com/x">
            <img class="twitter" src="images/twitter.png">
        </a>
        <a target="_blank">
            <img class="twitter" src="images/twitter.png">
        </a>
        <a target="_blank" href="https://www.facebook.com/x">
            <img id="fb" src="images/fb.png"
                 onmouseover="this.src='images/fb-hover.png'"
                 onmouseout="this.src='images/fb.png'">
        </a>

    </div>
</body>

CSS：

#top-bar {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    background-color: #166330;
}
body {
    margin: 0;
    padding: 0;
    background-image: url(images/bg.png);
    background-size: 100%;
    color: white;
}
.twitter {
    margin-left: 30px;
    margin-top: 10px;
    margin-right: 10px;
    min-height: 30px;
    min-width: 30px;
    max-height: 30px;
    max-width: 30px;
}
#fb {
    min-height: 30px;
    min-width: 30px;
    max-height: 30px;
    max-width: 30px;
}

Answer 1

有两种方式。

1]删除white spaces <a>和<img/>代码之间的所有</a>。

2]将text-decoration:none;添加到<a>元素。

Answer 2

a标记内的空白。

如果你这样写没有这样的空格，就不会出现“下划线”。例如。类似的东西：

<a target="_blank" href="https://twitter.com/x"><img class="twitter" 
    src="images/twitter.png"></a>

所以“下划线”实际上是一个带有空白文本的链接，浏览器显示带下划线的链接，即使文本只是一个空格。

Answer 3

简单..只需使用此

a{
  text-decoration:none;
 }

Answer 4

标签A中的

user style =“text-decoration：none”

<a  style="text-decoration:none" href=....

HTML视觉无法正确呈现

4 个答案: