Mô hình Hộp: Internet Explorer so với W3C


25

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:

nhập mô tả hình ảnh ở đây

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.widthtí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?


3
Mặc dù tôi thường không thích những thứ IE làm khác nhau, nhưng lập luận này khá thú vị.
FUZxxl

8
bạn thực sự chỉ làm nổi bật sự thất bại CSS nói chung có trong việc mô tả bố cục, và vâng IE thực sự đã có một mô hình hộp tốt hơn.
Ryathal

11
Trong trường hợp bạn không biết, bây giờ bạn có thể chỉ định mô hình hộp nào sẽ sử dụng trong tệp CSS của mình. Sử dụng thuộc tính "kích thước hộp" và đặt giá trị của nó thành "hộp viền" nếu bạn muốn sử dụng mô hình hộp IE.
FishBasketGordo

Câu trả lời:


9

Việc lựa chọn có bao gồm phần đệm và đường viền vào chiều rộng hay không là tùy ý. Điều duy nhất mà nó quan trọng là xây dựng bố cục nhiều cột. Tuy nhiên, bạn nên trả tiền cho thực tế là mọi người đã sử dụng bảng cho bố cục tại thời điểm đó. Vì vậy, đối với họ mối quan tâm đó dường như không đủ quan trọng và họ cho rằng việc có thể chỉ định độ rộng chính xác mà nội dung sẽ chiếm trong CSS có vẻ có giá trị hơn nhiều.

Đối với các nhà phát triển ngày nay, tình hình có vẻ hoàn toàn khác khi họ sử dụng CSS cho bố cục và họ phải đối phó với mô hình đấm bốc CSS. Rất may, chúng tôi có khả năng ghi đè các quy tắc đấm bốc, vì vậy, trong hầu hết các trường hợp, quy tắc đơn giản ở đầu biểu định kiểu của bạn hoạt động tuyệt vời:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

Để trích dẫn Jeff Kaufman về chủ đề này :

Mặc dù vậy, thông số kỹ thuật đã xác định nó theo cách khác, tuy nhiên, tín hiệu mà nó sẽ gửi cho Microsoft để thông qua việc giải thích sai của họ sẽ có hại cho web. Microsoft đã sử dụng một cách tiếp cận, mở rộng và dập tắt, trong đó họ cố tình tạo ra các sản phẩm hoạt động khác với các đối thủ cạnh tranh để khóa người dùng vào các phiên bản của Microsoft. Họ đã tiến rất gần đến thành công với web: từ khoảng 2000 đến 2005 IE phổ biến đến mức nhiều trang web được thiết kế chỉ dành cho nó. Việc áp dụng phương pháp tiếp cận của IE ở đây có thể đã nói với Microsoft "bạn có thể làm bất cứ điều gì bạn muốn với IE và chúng tôi sẽ điều chỉnh các tiêu chuẩn để làm cho nó hợp pháp".

Vì vậy, mô hình hộp đã trở thành nạn nhân của cuộc đấu tranh quyền lực giữa W3C và Microsoft.


1
Tôi sẽ tránh ghi đè toàn cầu với *. Tôi thà chọn lọc ghi đè nó ở những nơi cần thiết.
CodeInChaos
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.