Cơ bản về tính toán box model trong css !!! - CLB ViOLET thành viên học sinh

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>
    <p>Lorem ipsum dolor sit amet</p>
    </li>
    <li>
    <h3>News article 2</h3>
   <p>Lorem ipsum dolor sit amet</p>
   </li>
   </ul>
   </div>

Nếu với các trình duyệt chuẩn như firefox và opera thì để có được tổng chiều rộng là 250px cho #news thì ta dùng code sau :

    #news {
    padding:10px;
    border:1px solid;
    width:228px;
    }

nhưng sẽ gặp vấn đề với ie
thay vì dùng như vậy ta chèn thêm một thẻ div bao bọc xung quanh #new ví dụ ban đầu với tên là #sidebar như sau:

Và code sẽ như sau để chạy được tuốt trên các trình duyệt :

    #sidebar {width:250px}
    #news {
    padding:10px;
    border:1px solid;
    }

Ở đây ta cho #sidebar có chiều rộng của phần nội dung là 250px , tránh đến việc đề cập 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:

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

<Sưu tầm>

Nhắn tin cho tác giả

Code Admin @ 16:10 18/08/2011
Số lượt xem: 916

Số lượt thích: 0 người

7 thủ thuật CSS thường dùng đối với các lỗi "cố ý" của IE (18/08/11)
Kỹ năng CSS liên quan đến text dành cho việc chỉnh sửa Template (Mẫu) (18/08/11)
10 Thủ thuật CSS mà bạn cần biết – Phần I (18/08/11)
CSS là gì? (18/08/11)
Tạo website trực tuyến, miễn phí nên chọn dịch vụ nào? (17/08/11)