简体   繁体   中英

HTML visual not rendering properly

Please view the code here.. 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. Very peculiar problem. What should be done?

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

There are two ways.

1] Remove all the white spaces between <a> <img/> and </a> tags.

2] Add text-decoration:none; to the <a> elements.

That's a blank inside your a tag.

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.

simple.. just use this

a{
  text-decoration:none;
 }

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM