CSS: szerokość łącza nie zmienić przez ustawienie szerokości atrybut

Question

mam ten budowy:

<a onclick="toggle_media_box(); return false;" href="#" class="media_link"> 
    <div id="media_link" class="media_link"></div> 
</a><br /> 

#media_link { 
    background-image: url("/images/media.png"); 
} 

.media_link { 
    width: 445px; 
    height: 200px; 
} 

Rozmiar obrazu jest 445px (ale było 620px). Wszystkie inne linki tego typu mają rozmiar 620px.

W IE wszystko działa dobrze, a link ma 445 pikseli. Jednak w przeglądarkach Firefox i Chrome łącze ma nadal 620 pikseli szerokości. Element div ma rozmiar 445px.

Co robić? Znacznik <a> musi mieć rozmiar 445 pikseli.

Ciekawostką jest to, że link ma wskaźnik myszy do rozmiaru 445 pikseli, ale można go kliknąć do rozmiaru 620 pikseli.

Pozdrawiam Joern.

Answer 1

Następnie znacznik <a> jest elementem wstawianym. Dlatego szerokość jest określana przez długość tekstu w tagu. Aby to naprawić, możesz dodać display:block; do klasy .media_link i będzie działać zgodnie z oczekiwaniami.

Answer 2

Trzeba float: left lub display: block lub (najlepiej) display: inline-block na a:

.media_link { 
    display: inline-block 
} 

---

Twój wykorzystanie class="media_link" dwukrotnie i #media_link jest mylące. Korzystanie z <br /> nie jest wymagane - można to zastąpić przez display: block.

zalecam zmianę do tego: http://jsfiddle.net/Yg4YN/2/

<a onclick="toggle_media_box(); return false;" href="#" class="media_link"> 
    <span class="media_span"></span> 
</a> 

.media_link, .media_span { 
    display: block; 
    width: 445px; 
    height: 200px; 
} 
.media_span { 
    background-image: url("/images/media.png"); 
} 

Answer 3

kod HTML jest obecnie nieważne i należy umieścić kotwicę <a> wewnątrz <div> zamiast na odwrót.

Po uzyskaniu poprawnego kodu HTML można ustawić kotwicę na display:block i odpowiednio ją dostosować.