Warum haben meine Bildlinks diesen seltsam geformten Umriss?
Es macht mir nichts aus, dass die Grenze erscheint, es ist nur das seltsame Stück an der Spitze, das ich nicht mag. Ich weiß, dass ich damit umgehen kann, indem ich outline: 0 die Grenze komplett loswerde, aber ich weiß auch, dass das schlecht ist .
Das HTML-Setup ist
%Vor%Ein Auszug aus dem CSS:
%Vor% (Der Effekt ist ähnlich, wenn die beiden in einem einzigen <a> kombiniert werden.)
Ich denke, das hängt mit der Verwendung von display: block auf dem Bild zusammen. Ich habe das Problem hier reproduziert: Ссылка
2 Antworten
Wenn Sie die Gliederung nicht entfernen möchten, besteht eine Lösung darin, display:inline-block für <a> anzugeben.
Um ehrlich zu sein, ich bin mir nicht ganz sicher, warum das genau funktioniert. Auch nicht, wo die zusätzlichen Zeilen herkommen, wenn <a> kein Inline-Block ist.
Eine andere alternative Methode, um davon auszugehen, dass die Links an die gleiche Position gehen, ist das Hinzufügen von outline:none zum Link, aber auch Hinzufügen eines Hover / Focus-Effekts zum Bild, um den darunter liegenden Link hervorzuheben, um den Zugriff zu erleichtern
Codepen Ссылка