Nie granica tagów kotwicznych, które zawierają wizerunek

Question

Mam globalną regułę dla tagów kotwicy w moim dokumencie:

a,a:hover {border-bottom: 1px solid #ccc;} 

Ale granica nie wygląda dobrze na zdjęciach. Byłem ciekawy, czy istnieje sposób na usunięcie granicy znacznika zakotwiczenia, który zawiera obraz tylko za pomocą czystego css?

Answer 1

Znalazłem to: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/

To w zasadzie jest bardzo prosty hack, który wygląda tak:

a img { border:none; vertical-align:top; } 

To działa jak urok i nie ma przeglądarkę konfliktów: Zobacz artykuł o więcej szczegółów.

Answer 2

Nie, aktualnie nie ma selektora w CSS, który wybierałby elementy na podstawie ich potomków. Będziesz musiał użyć JavaScript lub klas w CSS.

Najsolidniejsze byłoby użycie atrybutu class dla wszystkich linków, które nie zawierają obrazu i użycie odpowiedniego selektora klasy w regule CSS.

Jeśli większość linków nie zawierają obrazu, można użyć negatywne podejście i ustawić klasę na te linki, które zawierają obraz, powiedzmy class=imagelink i użyć selektora :not(.imagelink) w CSS. Obsługa :not(...) jest powszechna, ale nie jest uniwersalna. Jeszcze inne podejście, nie licząc na takiego wsparcia, to ustawić dolną granicę na wszystkich połączeniach jak na swoje pytanie, a następnie go wyłączyć linków graficznych:

a.imagelink {border-bottom: none;} 

Answer 3

niemożliwe, niestety! Myślę, że zrobiłem to tylko za pomocą jquery.

http://www.w3schools.com/cssref/css_selectors.asp

Complex CSS selector for parent of active child

Is there a CSS parent selector?

Answer 4

To nie jest możliwe przy użyciu css ale można to zrobić za pomocą css jeśli dodać cssParentSelector.js skrypt, który wykorzystuje jQuery. Here is an example

a! > img { border: none; }​ 

powyżej css reguły usuwa ramkę z tagiem a jeśli jest rodzicem tagu img, ale teraz to nie jest czysta css ma dependendencies.

Answer 5

vertical-align sztuczka działa tylko [również] z nieprzezroczystych obrazów, a nie działa w ogóle, jeśli aline-height jest większa niż wysokość obrazu (myślę małych ikon społecznościowych).

Życzę sobie, abym mógł skorzystać z przyjętego rozwiązania tutaj, ale zrzuca wyrównywanie wstawionych obrazów w blokach tekstu, wraz z powyższymi problemami.

Postanowiłem zrobić solidną białą box-shadow na dole a > img, być może kopii zapasowej filter cienia dla IE8 i starszych, i nazywając to dzień.Nie zadzieraj z układem:

a { text-underline: none; 
    border-bottom: 1px solid blue; } 

a img { box-shadow: 0 .333em 0 0 white; /* white, or your background color */ 
     filter: progid:DXImageTransform.Microsoft.Shadow... etc } 

Answer 6

Jak już powiedziano w innych odpowiedziach na twoje pytanie, nie można tego już zrobić z CSS. Ale jeśli używasz jQuery, to doskonale:

$(document).ready(function(){ 

    $('a img').parent().css('border','none'); 

}); 

To w zasadzie po załadowaniu strony wyszukiwania linków zawierających obraz i podać regułę CSS border: none; dla elementu macierzystego obrazu, tj. połączenie.