CSS: chiều rộng của một liên kết không thay đổi bằng cách thiết lập thuộc tính chiều rộng

Question

Tôi có xây dựng này:

<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; 
} 

Kích thước của hình ảnh là 445px (nhưng là 620px). Tất cả các liên kết khác như thế này đều có kích thước 620px.

Trong IE, mọi thứ hoạt động tốt và liên kết có kích thước 445px. Nhưng trong Firefox và Chrome, liên kết vẫn rộng 620px. Div có kích thước phù hợp là 445px.

Việc cần làm? Thẻ <a> phải có kích thước 445px.

Điều thú vị là, liên kết di chuột lên đến kích thước 445px, nhưng có thể nhấp lên đến kích thước 620px.

Yours Joern.

Answer 1

Sau đó, <a> thẻ là phần tử nội tuyến. Do đó, chiều rộng của nó được xác định bởi độ dài của văn bản trong thẻ. Để khắc phục điều này, bạn có thể thêm display:block; vào lớp .media_link của mình và nó sẽ hoạt động như mong đợi.

Answer 2

Bạn cần float: left hoặc display: block hoặc (lý tưởng) display: inline-block trên a:

.media_link { 
    display: inline-block 
} 

---

sử dụng của bạn của class="media_link" hai lần và #media_link là khó hiểu. Sử dụng <br /> là không bắt buộc - bạn có thể thay thế bằng display: block.

Tôi khuyên bạn nên thay đổi như thế này: 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

mã HTML của bạn hiện không hợp lệ và bạn nên đặt neo <a> bên trong <div> chứ không phải là cách khác xung quanh.

Khi bạn đã có mã HTML đúng cách, bạn có thể đặt neo của mình thành display:block và đặt kích thước theo yêu cầu.