CSS links behaving differently in Chrome and Safari vs Firefox_问答_开发者

CSS links behaving differently in Chrome and Safari vs Firefox

开发者 https://www.devze.com 2023-01-10 13:54 出处：网络

currently i\'m having 2 issues. first of all, in chrome and safari there is a gray border around an image link. the border isn\'t there in firefox. here\'s the code:

currently i'm having 2 issues. first of all, in chrome and safari there is a gray border around an image link. the border isn't there in firefox. here's the code:

<a href="link.html" target="_blank">Link title <img class="leaving" /></a>

and css:

.leav开发者_如何学Pythoning {
    background-image: url("images/leaving.png");
    height:10px; width:10px;
    display:inline-block;
    background-repeat:no-repeat;
    border:none;
}

how do i get rid of the border?

also, certain heading links are being underlined in chrome and safari even though i set text-decoration to none. i would like to know how to get rid of the underline and also how to change it's color.

<a href="link">
<h3>Title</h3>
</a>

a h2,h3{
    color:#00264B;
    text-decoration:none;
}

"a" is set to underline in other places, but shouldn't "a h3" override anything else? what's going on here?

thanks.

you have a possible bug in your code :)

Here's what you have so far:

a h2,h3{
    color:#00264B;
    text-decoration:none;
}

The code above say's all H2's which are contained with "a" tags, and all h3's (which are NOT contained within "a" tags)

Firstly if you want all H3's which are contained inside "a" tags, then you need to do this:

a h2, a h3{
    color:#00264B;
    text-decoration:none;
}

Notice that I've added another "a" to the CSS

Secondly, and perhaps more importantly, I think it's better form to enclose "a" tags inside "h" tags as opposed to the way you are doing it:

h2 a, h3 a{
    color:#00264B;
    text-decoration:none;
}

But that might not work with your existing code:

Hope this helps

It is famous cross browser issue across Firefox and Safari. How ever the workaround for this problem is replace the img tag with span tag and every thing works as expected. I have changed the code as below

<body>
    <a href="link.html" target="_blank">Link title <span class="leaving"/></a>

</body>
</html>

or if you want to continue with the img tag itself you need to remove width attribute from css definition. Please find the modified css below

.leaving {
    background-image: url("images/leaving.png");
    height:10px;
    display:inline-block;
    background-repeat:no-repeat;
    border:none;
}