Cơ bản về tính toán box model trong css !!!
Nếu bạn nào đã tìm hiểu về css lâu , hoặc là thiết kế web lâu rùi thì chắc cái này biết rùi
^^, mình đây chỉ là đọc và thấy cái này rất cần thiết cho người mới làm quen với nó lên
viết thui ^^(nhớ lại lúc mới vọc css cánh đây 1 tháng cứ không hiểu tại sao mình lại làm
chạy được trên firefox chuẩn thì sang ie nó lại tùm lum):
Ở đây như trong hình , nếu mà theo chuẩn w3c thì tổng chiều rộng sẽ là :
total width = margin-left + border-left + padding-left + width + padding-right + border-
right + margin-right
quên mất là các bạn phải nhớ nhé , cái width mà ta khai báo trong css ý ở w3c thì nó chỉ
là chiều rộng của phần nội dung thui , tức là cái width trong công thức kia.
-Còn đối với bác ie nhà ta :
total width = margin-left + width + margin-right
Có nghĩa là bác ý thích chơi một mình một kiểu không giống ai , cái chiều rộng ra khai
báo trong css thì sẽ là tổng cộng của cả border và padding
Cái này là rất quan trọng trong việc nếu ta thiết kế css theo kiểu chính xác đến từng pixel
Ví dụ :
#news {
padding:10px;
border:1px solid;
width:250px;
}
Giờ bạn lấy cái thước mét ra đo xem thì sẽ thấy bác firefox hay opera đều hiển thị đúng
còn ie thì không ^^
-Cánh khắc phục:
+Tránh hoàn cảnh là nguyên nhân của vấn đề :
VD có đoạn code sau cần làm:
<div id="news">
<h2>News</h2>
<ul>
<li>
<h3>News article 1</h3>

trong thẻ #new là 228px để có được cùng một chiều rộng tương tự(nhưng nếu đề cập là
228 thì trên bác ie sẽ sạc T_T)
+Dùng hack với firefox tránh cho ie5/win:
#news {
padding:10px;
border:1px solid;
width:250px;
w\idth:228px;
}
khi gặp dòng w\idth:228px; thì ie5 sẽ không hiểu nhưng firefox thì hiểu và sẽ hiển thị
chiều rộng của nội dung là 228px
+Sử dụng bình luận có điều kiện cho ie6:
<! [if lt IE 6]>
<style type="text/css">
#news {width:250px}
</style>
<![endif] >
Thì chỉ bác ie6 nhà ta hiểu được
Mong chia sẻ được chút kiến thức với mọi người
!important
Khi code CSS gặp vấn đề ở độ rộng (width), chiều cao (height), nên thêm !important vào
phía sau. Ví dụ :
#vidu{
width:10px !important; (FF, IE7 nhận cái giá trị width này)
width:10px; (IE6 nhận giá trị width này)
}
#vidu{
#width:772px; /*only IE7 know*/
_width:800px; /*only IE6 know*/
}

-Cánh khắc phục : rất đơn giản là chỉ việc chèn thêm dòng code display:inline; vô đoạn
style trên để cho bác ie nhà ta hiểu đúng thui
<style type="text/css">
#float{
border:5px solid #FF0000;
float:left;
margin-left:100px;
display:inline;
}
</style>
<div id="float"><h3>Tôi là tôi</h3></div>
7 thủ thuật CSS thường dùng đối với các lỗi "cố ý" của IE
Ngày đăng: 2007-12-21Nguồn tin: Thông tin công nghệ
Internet Explorer là trình duyệt web phổ biến nhất do
nó được tích hợp chặt chẽ với Windows, lợi thế đó cho thấy sự ích kỉ và sinh ra sự áp đặt
đối với người dùng, đặc biệt là các nhà phát triển. Có những đoạn mã đúng chuẩn
XHTML có thể chạy tốt trên tất cả các trình duyệt đạt chuẩn hiển thị XHTML nhưng
chưa hẳn nó sẽ hiển đúng trên IE thậm chí IE còn không thèm trả lại kết quả. Dưới đây là
7 thủ thuật CSS thường dùng đối với các lỗi độc quyền của ngài IE trong quá trình thiết
kế một trang Web.
1. Lỗi hiển thị khối
Sửa lỗi hiển thị cho các phiên bản IE6 về trước khi viền và khoảng cách với nội dung bao
gồm cả chiều rộng của đối tượng.
padding: 4em;
border: 1em solid red;
width: 30em;
width/**/:/**/ 25em;
2. Ghi chú điều kiện
Những ghi chú này đơn giản là những ghi chú chỉ hiển thị đối với những phiên bản trình
duyệt nhất định do từng phiên bản có những lỗi khác nhau.

max-width: 1220px;
width:expression(document.body.clientWidth < 750? "750px" :
document.body.clientWidth > 1220? "1220px" : "auto");
}
Một cách khác không dùng đến JS trong CSS:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
Đoạn mã này cho kết quả như nhau trên các trình duyệt IE6, Mozilla/Firefox/Gecko,
Opera 7.x+, Safari1.2; có lẽ là tối ưu nhất chăng ?
4. Chọn đối tượng
Tùy từng phiên bản khác nhau của IE mà lỗi chọn đối tượng được sửa theo những cách
khác nhau như sau:
- IE 6 trở về trước
*html {}
- IE 7 trở về trước
*:first-child+html {}
* html {}
- IE 7
*:first-child+html {}
- IE 7 và các trình duyệt mới khác
html>body {}
- Các trình duyệt mới khác trừ IE 7
html>/**/body {}
- Các phiên bản Opera v9 trở về trước
html:first-child {}
5. Hiệu ứng hover:
Mã :hover cho phép bạn tạo ra những hiệu ứng đặc biệt đối với các đối tượng được liệt kê