Lỗi khó hiểu: DOCTYPE và Firefox “đá nhau”

24 Jun

Vừa phát hiện ra một lỗi ngớ ngẩn: <!DOCTYPE> và Firefox 1.5.0.4 "đá nhau". Chính xác hơn là DOCTYPE cho XHTML 1.0 Strict.

Ví dụ, khi chèn dòng sau đây vào đầu file html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

Mở bằng IE thì không có vấn đề gì. Nhưng khi mở bằng Firefox thì tất cả các tag IMG đều tự động mang hiệu ứng giống như có style margin-bottom, bị hở một khoảng khá lớn phía dưới khi nằm trong một block. Khi đó, hầu như mọi layout có dùng đến IMG đặt trong một TD hay DIV đều bị thay đổi. Tôi đã thử đặt lại margin và cả padding = 0 mà vẫn không khắc phục được.

Lưu ý, lỗi trên không xảy ra nếu dùng DOCTYPE là XHTML 1.0 Transitional.

Cách khắc phục:

Sau khi quần cái HTML một lúc, tưởng như ngoài cách bỏ DOCTYPE hoặc đổi sang Transitional ra không còn cách nào khác thì lục được cái link này:

http://www.mozilla.org/docs/web-developer/faq.html#gaps

Giải thích chi tiết hơn ở đây.
Cách 1: Chuyển IMG thành block:

img {display: block;}

Cách 2:Đặt lại vertical-align

img {vertical-align: bottom;}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: