Lỗi box model trong IE 6, nguyên nhân và khắc phục

[phongjalvn]

Bài viết tham khảo từ Wikipedia.

Hi mọi người, hôm nay mình trả lời 1 thắc mắc của các bạn đó là sự khác biệt về margin, padding, width của IE 6 và FF ( IE 7 nữa chứ nhỉ )

Đầu tiên, ta tham khảo bức hình sau:



Nhìn vào tấm hình bạn chắc cũng đã phần nào hình dung được vấn đề

VD bạn có CSS
#box{
width:100px;
padding:10px;
border:10px red solid;
margin:10px;
}

Khi render trên FF, ta sẽ có widh thật của nội dung = 100px + 10px + 10px = 120px;
Nhưng trên IE ta sẽ có ... 100px <~ chênh lệch khá lớn.
Lỗi này xuất hiện chủ yếu trong IE 5.x

Nhưng tại sao lỗi này lại xảy ra trên IE 6 ( và có thể là 7 luôn, trong 1 số trường hợp)

Nếu bạn gặp rắc rối, hãy kiểm tra lại những thành phần sau:
Doctype: hãy chắc chắn bạn đã để đúng doctype
HTML 4.0 transition và những trang sử dụng frameset sẽ có thể gây lỗi

Khi bạn vướng phải 1 trong 3 lỗi này, trình duyệt sẽ rơi vào trạng thái quirks mode ( tương thích ngược ) và sử lý như IE 5.x dẫn đến lỗi.

Đây là cách sửa lỗi trên IE 6 và 7, còn nếu bạn muốn chắc chắn nó hoạt động được trên IE 5, bạn có thể search "box model hack" trên google

[2_lua_IT]

Thế người ta yêu cầu doctype thì pác giải quyết sao ? Khách hàng khó tính bắt pác phải tuân theo chuẩn xHTML Doctype Strict. Pác có cách nào khắc phục kô ?

[darkera13]

box model là cái chi chi vậy?

[phongjalvn]

Thế người ta yêu cầu doctype thì pác giải quyết sao ? Khách hàng khó tính bắt pác phải tuân theo chuẩn xHTML Doctype Strict. Pác có cách nào khắc phục kô ?

Đọc kĩ lại đi bro,

HTML 4.0 transition và những trang sử dụng frameset sẽ có thể gây lỗi

[2_lua_IT]

Sorry, nhìn kô kỹ.
Luôn tiện hỏi luôn trường hợp này bị gặp hoài :
CSS :
#content {width:500px; }
#box01{ width:100px; padding:10px; border:10px red solid;
margin:10px;float:left;
}
#box02{
width:200px; padding:10px;
border:10px red solid; margin:10px; float:right;
}

HTML :

<div id="content">
<div id="box01">wrhfwehr wkjtaq</div>
<div id="box02">wrhfwehr wkjtaq<br />ahgeahtlkj</div>
</div>

Tui kô hiểu tại sao có sự khác nhau của margin giữa IE và FF. Margin khi có float là nhảy lung tung cả lên, kô biết cách khắc phục. Các Bro giúp với nhé.

[phongjalvn]

Lỗi này gọi là lỗi double margin, xảy ra khi ra add margin right hoặc left của 1 float element ( IE 6)

Ta xem ví dụ sau nhé:

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px; 
  /* Margin left 100px */
  }

Test thử trên IE 6, nó thành ... 200px

Cách khắc phục:

Biện pháp 1: khuyên nhủ em nó từ từ

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px; 
  /* Margin left 100px */
  display:inline;
  }

Nhưng đôi khi, ta không thể display:inline được thì đành ... ép em nó nghe lời vậy, ta dùng kĩ thuật star hack

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px; 
  /* Margin left 100px */
  }
* html .floatbox{
  margin-left:50px; /* phân nửa cái margin ta muốn, nó bug thì ... thành đúng*/
  }

Cách 2 có cái bất tiện là ... nếu số lẻ thì ... bị dư hoặc thiếu 1px ), chịu thôi

[2_lua_IT]

hihi, đồng ý với pác trường hợp display:inline. Còn trường hợp Start hack áp dụng cho IE. Nếu Firefox có khác IE thì canh Firefox cho đúng sau đó áp dụng Start Hack cho IE. Thanks nhá Phongjalvn.

[phongjalvn]

Sorry vì bài bữa trước, mình sai trong cái star hack (¯ - ¯!) đã fix

[darkera13]

Về star hack tôi xin bổ sung thêm cách viết ngắn gọn hơn đó là đặt ngay trước attribute

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  *margin-left: 50px;
  /* Margin left 100px */
  }

Lưu ý một chút là nếu dùng star hack thì sẽ có tác dụng cho cả IE7 nên bạn có thể sử dụng underscore nếu chỉ muốn có hiệu ứng trên IE6

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  _margin-left: 50px;
  /* Margin left 100px */
  }

[phongjalvn]

Cách của bác dark là invalid đấy nhé (theo w3c) nhưng vẫn hoạt động good, ^^