Trong quá trình phát triển giao diện web, một trong những thách thức lớn nhất mà kỹ sư front-end phải đối mặt là sự khác biệt trong cách hiển thị của các trình duyệt (như Chrome, Firefox, Safari, và các phiên bản Internet Explorer cũ). Mã nguồn giống nhau có thể được kết xuất khác biệt trên từng nền tảng, dẫn đến việc vỡ giao diện hoặc trải nghiệm người dùng không đồng nhất. Dưới đây là tổng hợp các vấn đề phổ biến về tính tương thích và các phương án xử lý kỹ thuật.

1. Thứ tự của các pseudo-class

Đôi khi trạng thái hover hoặc active của thẻ liên kết (<a>) không hoạt động sau khi người dùng đã click vào. Nguyên nhân là do thứ tự khai báo CSS không đúng. Theo tiêu chuẩn, thứ tự ưu tiên phải tuân thủ quy tắc L-V-H-A (Link - Visited - Hover - Active) để đảm bảo các style ghi đè nhau chính xác.

2. Lỗi Double Margin trong IE6

Trên Internet Explorer 6, khi một phần tử được floats theo một hướng nào đó (ví dụ float: left) và có cùng phía margin, giá trị margin đó sẽ bị nhân đôi. Ví dụ, margin là 10px sẽ hiển thị thành 20px.

.fix-ie6-bug {
    float: right;
    margin-right: 20px; /* Trên IE6 sẽ bị hiểu là 40px */
    width: 300px;
    display: inline; /* Thuộc tính này khắc phục lỗi margin bị nhân đôi trên IE6 */
}

3. Vấn đề về chiều cao container và thuộc tính min-height

Các trình duyệt tuân thủ chuẩn (như Firefox) sẽ không tự động mở rộng chiều cao của container (có chiều cao cố định) khi nội dung bên trong tràn ra. Để giải quyết, ta nên dùng min-height. Tuy nhiên, IE6 không hiểu min-height, ta cần sử dụng mẹo sau:

.adaptive-box {
    height: auto !important; /* Các trình duyệt chuẩn sẽ lấy dòng này */
    height: 250px; /* IE6 sẽ hiểu dòng này thay vì min-height */
    min-height: 250px; /* Trình duyệt chuẩn hiểu */
}

4. Tùy chỉnh màu thanh cuộn (Scrollbar)

Để thay đổi màu sắc thanh cuộn trên các phiên bản IE cũ, thay vì áp dụng style cho body, bạn cần áp dụng cho thẻ html để CSS có hiệu lực.

5. Tạo thẻ div có chiều cao rất nhỏ (1px)

Trên IE6, do mặc định dòng chữ (line-height) có chiều cao nhất định nên bạn khó set chiều cao thẻ div xuống mức 1px. Các cách khắc phục bao gồm: thiết lập overflow: hidden, hoặc set line-height: 1px, hoặc dùng zoom: 1.

6. Hiển thị lớp phủ (Layer) phía trên Flash

Để một thẻ div hoặc menu có thể nằm đè lên đối tượng Flash, bạn cần thiết lập chế độ trong suốt cho thẻ embed hoặc object của Flash thông qua tham số:

<param name="wmode" value="transparent" />

7. Căn giữa khối theo chiều dọc trong trình duyệt

Kỹ thuật sử dụng định vị tuyệt đối kết hợp với margin âm là một giải pháp kinh điển. Bạn đặt phần tử ở vị trí 50% từ trên và trái, sau đó dùng margin âm bằng một nửa kích thước của chính nó để kéo nó về tâm.

.vertical-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px; /* -1/2 chiều cao */
    margin-left: -200px; /* -1/2 chiều rộng */
    border: 1px solid #333;
}

8. Căn giữa khối lồng nhau trong Firefox

Trong khi text-align: center trên phần tử cha hoạt động tốt trên IE để căn giữa khối con, thì Firefox lại bỏ qua thuộc tính này đối với các phần tử khối (block-level elements). Giải pháp chuẩn nhất là đặt margin: 0 auto cho phần tử con.

#parent-container { }
#child-box {
    margin: 0 auto; /* Căn giữa khối con trong Firefox và các trình duyệt chuẩn */
    width: 200px;
}

9. Căn giữa ảnh theo chiều dọc

Để căn giữa ảnh bên trong một container, ta có thể kết hợp các thuộc tính positioning. Một phương pháp cũ nhưng hiệu quả là sử dụng top: 50% cho wrapper và top: -50% cho ảnh.

.img-wrapper {
    width: 600px;
    height: 400px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    display: table-cell; /* Giả lập hành vi của cell trong bảng */
}
/* Fallback cho các trình duyệt không hỗ trợ table-cell tốt */
.img-wrapper p {
    position: relative;
    top: 50%;
}
.img-wrapper img {
    position: relative;
    top: -50%;
    vertical-align: middle;
}

10. Xử lý độ trong suốt PNG trong IE6

IE6 không hỗ trợ định dạng PNG 24-bit có nền trong suốt. Ta cần sử dụng bộ lọc (filter) riêng của Microsoft để xử lý:

.png-fix {
    _background: none; /* Ẩn background gốc cho IE6 */
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}

11. Đ normalize chiều cao của font chữ

Cùng một cỡ chữ (ví dụ 14px) nhưng các font khác nhau (Times New Roman, Arial...) và các trình duyệt khác nhau sẽ có chiều cao hiển thị (height) và khoảng cách (leading) khác biệt. Để giao diện đồng nhất, luôn thiết lập line-height cụ thể cho các phần tử văn bản, tránh để giá trị mặc định của trình duyệt can thiệp.

12. Xử lý khoảng trắng thừa dưới ảnh

Khi đặt ảnh trong một thẻ div, thường xuất hiện một khoảng trắng nhỏ (~3px) dưới chân ảnh do khoảng cách dòng văn bản (baseline). Cách khắc phục đơn giản nhất là đặt display: block cho thẻ img, hoặc thiết lập vertical-align: bottom/middle.

<div class="photo-box">
    <img src="photo.jpg" style="display: block;" />
</div>