HTML视觉无法正确呈现

Question

Please view the code here.. JS Fiddle . 请在这里查看代码。JS Fiddle 。 There is a peculiar problem that a blue colored underscore is appearing right after the first image. 有一个特殊的问题，即在第一个图像之后立即出现蓝色下划线。 Why is this happening? 为什么会这样呢？ Note that just removing the href makes it disappear. 请注意，仅删除href会使它消失。 Very peculiar problem. 非常特殊的问题。 What should be done? 应该做什么？

HTML: 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: 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

There are two ways. 有两种方法。

1] Remove all the white spaces between <a> <img/> and </a> tags. 1]删除<a> <img/>和</a>标记之间的所有white spaces 。

2] Add text-decoration:none; 2]添加text-decoration:none; to the <a> elements. 到<a>元素。

Answer 2

That's a blank inside your a tag. 这是你的内空a标签。

If you write it without blanks like this, no "underscore" appears. 如果您在编写时没有这样的空格，则不会出现“下划线”。 Eg something like: 例如：

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

So the "underscore" is actually a link with a blank text and the browser displays links with an underscore, even if the text is just a white-space. 因此，“下划线”实际上是带有空白文本的链接，即使文本只是空白，浏览器也会显示带下划线的链接。

Answer 3

simple.. just use this 简单..只用这个

a{
  text-decoration:none;
 }

Answer 4

标签A中的用户样式=“ text-decoration：none”

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

HTML视觉无法正确呈现

问题描述

4 个解决方案

解决方案1
3 已采纳 2014-07-13 08:59:46

解决方案2
1 2014-07-13 08:53:39

解决方案3
0 2014-07-13 08:56:33

解决方案4
0 2014-07-13 08:57:13

HTML视觉无法正确呈现

问题描述

4 个解决方案

解决方案1 3 已采纳 2014-07-13 08:59:46

解决方案2 1 2014-07-13 08:53:39

解决方案3 0 2014-07-13 08:56:33

解决方案4 0 2014-07-13 08:57:13

解决方案1
3 已采纳 2014-07-13 08:59:46

解决方案2
1 2014-07-13 08:53:39

解决方案3
0 2014-07-13 08:56:33

解决方案4
0 2014-07-13 08:57:13