Ngày nay, vấn đề Mô hình Hộp Internet Explorer hầu hết không phải là vấn đề. Hầu hết các nhà phát triển web đặt một <!DOCTYPE>
thẻ để thực thi tuân thủ tiêu chuẩn và không ai thực sự quan tâm đến việc hỗ trợ Internet Explorer 5.5 nữa.
Tuy nhiên, một số nhà phát triển đã đưa ra các lập luận chủ quan, mang tính khái niệm để bảo vệ mô hình hộp IE. Họ đã tuyên bố rằng mô hình hộp IE "trực quan" hơn mô hình W3C, bởi vì mô hình W3C đo nội dung của hộp, trong khi mô hình IE tự đo hộp:
Tôi có thể thấy quan điểm của họ, nhưng về cơ bản, đó là một lập luận chủ quan và điều quan trọng nhất là tuân thủ tiêu chuẩn .
Tuy nhiên, gần đây tôi đã thích mô hình hộp IE vì những lý do thực tế nghiêm trọng . Mô hình hộp W3C gây khó khăn cho việc thay đổi kích thước một phần tử thành độ rộng pixel chính xác trên màn hình của một phần tử khác. Lý do là thuộc style.width
tính của một phần tử không chiếm tổng kích thước trên màn hình của phần tử: bạn cũng cần tính đến bất kỳ đường viền và phần đệm bổ sung nào. Đây không phải là vấn đề nếu cả hai yếu tố sử dụng cùng một lớp CSS - nhưng nếu chúng có các lớp CSS khác nhau , điều này có thể trở nên khó khăn vô cùng.
Giả sử chúng ta có hai div: A và B. A được mã hóa cứng trong html dưới dạng div 400px, trong khi B được tạo động bằng Javascript. Trực quan, chúng tôi muốn B là chiều rộng chính xác của A. Theo mô hình IE Box cũ, điều này là không đáng kể. Chúng tôi chỉ đơn giản nói : B.style.width = A.style.width
, hoặc thậm chí B.style.width = A.offsetWidth + "px"
.
Nhưng với mô hình hộp W3C, điều này không đơn giản. Bây giờ chúng tôi cũng phải lo lắng về phong cách tờ. Nếu B có cùng lớp CSS với A, chúng ta có thể nói B.style.width = A.style.width
. Nhưng nếu nó không - và chúng tôi có thể không muốn nó vì lý do thẩm mỹ - chúng tôi gặp rắc rối. Bây giờ chúng ta phải tính đến tổng số pixel trong viền và phần đệm của cả A và B. Điều này có thể đặc biệt khó khăn nếu đường viền và phần đệm được chỉ định trong các đơn vị không nhất quán (một sự xuất hiện phổ biến vì đường viền thường là một dòng 1px, trong khi phần đệm có thể được chỉ định trong ems). Sau đó, chúng tôi phải đối mặt với nhiệm vụ gần như không thể chuyển đổi thành một đơn vị chung (em thành px hoặc px thành em). Tất cả điều này chỉ để có được hai div xếp hàng chính xác trên màn hình.
Về cơ bản, mô hình hộp W3C buộc chúng ta phải tính đến các vấn đề về viền và đệm CSS khi chúng ta đặt kích thước của một phần tử, trong khi mô hình hộp IE thì không, vì chiều rộng đo toàn bộ kích thước của hộp (từ đầu đến cuối -end), thay vì nội dung của hộp. Điều này làm cho nó dễ dàng hơn rất nhiều để kích thước các yếu tố động liên quan đến nhau.
Tất cả điều này có vẻ như là một lý do khá mạnh mẽ để ủng hộ mô hình hộp IE hơn mô hình W3C (ít nhất là về mặt khái niệm - tất nhiên trong thực tế mô hình hộp IE đã chết).
Câu hỏi : Tại sao W3C chọn mô hình hộp này? Có một số lợi thế của mô hình hộp W3C mà tôi không thấy? Hay tôi chỉ đơn giản là phóng đại vấn đề ở đây?