HTML視覺無法正確呈現

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]刪除<a> <img/>和</a>標記之間的所有white spaces 。

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中的用戶樣式=“ 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