Kein Rahmen für Anker-Tags, die ein Bild enthalten

8

Ich habe eine globale Regel für Anker-Tags in meinem Dokument:

%Vor%

Aber die Grenze sieht auf Bildern nicht gut aus. Ich war neugierig, ob es eine Möglichkeit gibt, den Rand eines Anker-Tags zu entfernen, das ein Bild nur mit reinem CSS enthält?

    
Nojan 29.12.2012, 19:47
quelle

6 Antworten

9

Ich habe Folgendes gefunden: Ссылка

Es ist im Grunde ein sehr einfacher Hack, der so aussieht:

%Vor%

Es funktioniert wie ein Zauber und hat keine Browser-Konflikte: Siehe Artikel für weitere Details.

    
exotec 29.07.2013, 13:17
quelle
4

Nein, derzeit gibt es in CSS keinen Selektor, der Elemente auf der Basis ihrer Nachkommen auswählen würde. Sie müssten JavaScript oder Klassen in CSS verwenden.

Am robustesten würden Sie ein class -Attribut für alle Links verwenden, die kein Bild enthalten, und einen entsprechenden Klassenselektor in Ihrer CSS-Regel verwenden.

Wenn die meisten Ihrer Links kein Bild enthalten, können Sie negative Ansätze verwenden und eine Klasse für die Links festlegen, die ein Bild enthalten, zB class=imagelink , und einen :not(.imagelink) Selektor in CSS verwenden. Unterstützung für :not(...) ist weit verbreitet, aber nicht universell. Ein weiterer Ansatz, der nicht auf eine solche Unterstützung setzt, ist, alle Links wie in Ihrer Frage unten zu setzen und dann für Bildlinks zu deaktivieren:

%Vor%     
Jukka K. Korpela 29.12.2012 20:03
quelle
2
2

Es ist nicht möglich, css zu verwenden, aber Sie können css verwenden, wenn Sie cssParentSelector.js hinzufügen Skript, das jQuery verwendet. Hier ist ein Beispiel

%Vor%

über css Regel entfernt den Rahmen vom a -Tag, wenn es das übergeordnete Element eines img -Tags ist, aber immer noch nicht rein css , hat Abhängigkeiten.

    
The Alpha 29.12.2012 20:09
quelle
2

Der vertical-align Trick funktioniert nur [gut] mit nicht transparenten Bildern und funktioniert überhaupt nicht, wenn a line-height größer als die Bildhöhe ist (denke an kleine Social-Networking-Icons).

Ich wünschte, ich könnte die akzeptierte Lösung hier verwenden, aber es wirft die Ausrichtung von Inline-Bildern in Textblöcken zusammen mit den oben genannten Problemen aus.

Ich habe beschlossen, eine solide weiße box-shadow am unteren Rand von a > img zu machen, vielleicht eine Sicherung filter shadow für IE8 und älter, und nenne es einen Tag. Verwechselt das Layout nicht:

%Vor%     
atwixtor 16.01.2014 16:54
quelle
0

Wie bereits bei anderen Antworten auf Ihre Frage gesagt, ist es mit CSS nicht möglich, dies jetzt zu tun. Aber wenn Sie jQuery verwenden, funktioniert das großartig:

%Vor%

Im Grunde nach dem Laden der Seite suchen Sie die Links, die ein Bild enthalten, und geben Sie die css-Regel border: none; für das Elternelement des Bildes an. der Link.

    
caos30 15.09.2017 01:04
quelle

Tags und Links