Những định dạng hình ảnh thường được sử dụng cho trang web

Hình ảnh là thành phần không thể thiếu của một trang web. Hình ảnh dùng để trang trí, nhấn mạnh nội dung, truyền tải thông điệp. Một trang web được xem là đẹp thì không thể thiếu hình ảnh.

Với vai trò khá quan trọng như thế, ta cần phải nắm rõ về những định dạng ảnh thường được sử dụng, từ đó vận dụng tốt hơn trong việc hiển thị trang.

Hiện nay được sử dụng nhiều nhất là 3 định dạng ảnh: GIF, JPG (JPEG), PNG. Mỗi định dạng này có những ưu khuyết điểm riêng, phục vụ tốt cho một mục đích hiển thị đặc thù. Mình sẽ trình bày sơ lược về "tiểu sử" cũng như cách sử dụng chúng, những chi tiết liên quan thì mình sẽ dẫn link tham khảo.

Khắc phục lỗi chiều cao thẻ nhỏ hơn chiều cao của font mặc định của IE6

Khi tạo box ta thường sử dụng 4 thẻ DIV với cấu trúc như sau

<div class="box">
    <div class="box-top"></div>
    <div class="box-middle">Nội dung</div>
    <div class="box-bottom"></div>
</div>

Ta sử dụng một hình ảnh làm nền:

Các phần box-top, box-middle, box-bottom chứa những phần hình ảnh tương ứng: cạnh trên của hộp, phần giữa hộp, cạnh dưới hộp. Do phần cạnh trên và cạnh dưới có chiều cao nhỏ 10px, ta đặt style như sau:

.box-top {height: 10px; background: ...}
.box-bottom {height: 10px; background: ...}

Hiển thị ở những trình duyệt khác thì hoàn toàn chính xác:

Riêng IE6 bắt đầu "khó chịu":

Lần này ta được "ban tặng" cho 2 khoảng trống rất chi là vô duyên. Vậy khoảng trống này từ đâu ra ? Xin thưa rằng, trong IE6 nếu một thẻ có chiều cao X, và chiều cao của font là Y thì IE6 sẽ chọn chiều cao lớn nhất giữa 2 giá trị này làm chiều cao hiển thị của thẻ, điều này làm phát sinh những khoảng trống ngoài dự liệu.