Wie kann ich die Unterstreichung eines verlinkten Bildes in Firefox und Chrome entfernen?

Question

Meine Tabellenköpfe enthalten Links, die, wenn sie angeklickt werden, einen AJAX-Aufruf ausführen, um die Sortierreihenfolge zu ändern.

<tr><th><a href="Name" style="display:block;">Name</a></th></tr>

Das ist großartig, ich kann überall in der Kopfzeile der Tabelle klicken, um den Link zu aktivieren.

Jetzt möchte ich Sortierpfeile hinzufügen, um die Sortierreihenfolge anzuzeigen.

<tr><th><a href="Name" style="display:block;">Name<img src="arrow.png" /></a></th></tr>

Das sieht im IE8 gut aus:

In FireFox und Chrome ist das Bild jedoch auch unterstrichen:

Ich habe mit verschiedenen CSS-Eigenschaften herumgespielt und kann es nicht so hinbekommen, wie ich es möchte. Wie kann ich dies in Firefox und Chrome arbeiten, wie es in IE8 tut?

Beachten Sie, dass ich die gesamte Zelle anklickbar sein soll, also muss ich "display:block;" für den Link verwenden, und ich brauche auch den Linktext und das Bild nebeneinander, also ist "display:block;" für das Bild keine Option.

Gracias.

Answer 1

Versuchen Sie dies

a{text-decoration:none;}
a:hover span{text-decoration:underline;}
<tr>
    <th>
        <a href="Name" style="display:block;">
            <span>Name</span>
            <img src="arrow.png" />
        </a>
    </th>
</tr>

Answer 2

Angenommen, das Bild muss sich innerhalb des A-Tags befinden, dann fassen Sie den Text in einem Span ein, entfernen mit CSS die Unterstreichung aus dem A und platzieren sie auf dem SPAN.

Answer 3

style="decoration:none;"

auf dem Link entfernt die Unterstreichung...., wenn Sie möchten, dass das Bild ein Teil des Links ist, umgeben Sie es mit einem zweiten Link, der das Gleiche tut und geben Sie ihm diesen Stil.

Answer 4

O a img{text-decoration:none;border:none;}