PDA

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



phongjalvn
04-06-2008, 10:50
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:

http://www.jt-vn.com/box-model-bug.png

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
05-06-2008, 16:22
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
05-06-2008, 21:37
box model là cái chi chi vậy?

phongjalvn
05-06-2008, 23:10
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, :D


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

2_lua_IT
06-06-2008, 00:31
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
06-06-2008, 15:36
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 :D

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
10-06-2008, 09:47
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
11-06-2008, 11:00
Sorry vì bài bữa trước, mình sai trong cái star hack (¯ - ¯!) đã fix

darkera13
14-06-2008, 14:19
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
16-06-2008, 10:05
Cách của bác dark là invalid đấy nhé :D (theo w3c) nhưng vẫn hoạt động good, ^^

darkera13
16-06-2008, 11:50
Cách của bác dark là invalid đấy nhé :D (theo w3c) nhưng vẫn hoạt động good, ^^

Đã là star hack thì kiểu gì cũng invalid W3C, không tin bác có thể thử cả cách star hack của bác.

Muốn validate thì dùng cách này


<!--[if IE 7]>
<link href="./styles/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

<!--[if IE 6]>
<link href="./styles/ie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

2_lua_IT
16-06-2008, 13:19
cách làm 2 file thì valid nhưng hơi bị lúa.

phongjalvn
17-06-2008, 22:23
Đã là star hack thì kiểu gì cũng invalid W3C, không tin bác có thể thử cả cách star hack của bác.

Ai nói bác là invalid ??? Valid 100%

* html .floatbox <~ descendant selector

Q: Vì sao star hack lại được dùng để fix lỗi IE 6 ?
A: Vì IE 6, phía bên ngoài tag html còn 1 tag nữa ( tag gì thì hỏi mấy bác phát triển IE 6 ấy )

Q: ngoài star hack còn phương thức css hack nào valid không ?
A: còn 1 số nữa, ví dụ child selector hack
Vd: html>body <~ IE 6 không hiểu child selector

Comment hack
Dùng cho IE chạy trên nền Mac
Cách này thì mấy bác check đi nhá

conan1212
18-06-2008, 01:12
Thấy mọi người quan tâm cái này, chắc phải viết một cái code kiểm tra bằng JS để check css cho designer quá :D

phongjalvn
19-06-2008, 00:21
JS check CSS là sao nhỉ :-??
cần check thì cứ W3C mà phang thôi :|