Có vẻ như trong IE, chiều rộng bao gồm kích thước đệm. trong khi ở FF, chiều rộng thì không. Làm thế nào tôi có thể làm cho cả hai cư xử giống nhau?
Cảm ơn.
Câu trả lời:
IE đã từng sử dụng mô hình hộp " hộp viền" tiện lợi hơn nhưng không chuẩn . Trong mô hình này, chiều rộng của một phần tử bao gồm phần đệm và đường viền. Ví dụ:
#foo { width: 10em; padding: 2em; border: 1em; }
sẽ 10emrộng.
Ngược lại, tất cả các trình duyệt sợ tiêu chuẩn mặc định cho mô hình hộp " hộp nội dung" . Trong mô hình này, chiều rộng của một phần tử không bao gồm phần đệm hoặc đường viền. Ví dụ:
#foo { width: 10em; padding: 2em; border: 1em; }
sẽ thực sự 16emrộng: 10em+ 2emđệm cho mỗi bên, + 1emviền cho mỗi cạnh.
Nếu bạn sử dụng phiên bản IE hiện đại với đánh dấu hợp lệ , một loại tài liệu tốt và các tiêu đề phù hợp, nó sẽ tuân thủ tiêu chuẩn. Mặt khác, bạn có thể buộc các trình duyệt tuân thủ tiêu chuẩn hiện đại sử dụng "hộp viền" thông qua:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}Tuyên bố đầu tiên là cần thiết cho Opera, thứ hai là cho Firefox, thứ ba là cho Webkit và Chrome.
Đây là một thử nghiệm đơn giản mà tôi đã thực hiện nhiều năm trước để thử nghiệm khai báo kích thước hộp nào mà trình duyệt của bạn hỗ trợ: http://phrogz.net/CSS/boxsizing.html
Lưu ý rằng Webkit (Safari và Chrome) không hỗ trợ padding-boxmô hình hộp thông qua bất kỳ tuyên bố nào.
Một quy tắc đơn giản là cố gắng tránh sử dụng thuộc tính padding / lề và width cho cùng một phần tử. tức là sử dụng một cái gì đó tương tự như thế này
<div class="width-div">
<div class="padding-div">
...........
...........
</div>
</div>Tôi đã va vào câu hỏi này và mặc dù nó đã vài tuổi, tôi nghĩ tôi có thể thêm câu này trong trường hợp có ai đó va vào chủ đề này.
CSS3 hiện có một thuộc tính kích thước hộp. Nếu bạn đặt, hãy nói,
.bigbox {
box-sizing: border-box;
width: 1000px;
border: 5px solid #333;
padding: 10px;
}lớp học của bạn sẽ rộng 1000px, thay vì 1030px. Tất nhiên, điều này cực kỳ hữu ích cho bất kỳ ai sử dụng viền có kích thước pixel với div lỏng, bởi vì nó giải quyết vấn đề không hòa tan.
Thậm chí tốt hơn, kích thước hộp được hỗ trợ bởi tất cả các trình duyệt chính trừ IE7 trở xuống. Để bao gồm tất cả các mục trong kích thước chiều rộng hoặc chiều cao, đặt kích thước hộp thành hộp viền. để tổng hợp các mục khác theo chiều rộng và / hoặc chiều cao, là mặc định, bạn có thể đặt kích thước hộp thành "hộp nội dung".
Tôi không chắc về trạng thái hiện tại của cú pháp trình duyệt, nhưng tôi vẫn bao gồm các tiền tố -moz và -webkit:
.bigbox{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}Bạn có một văn bản khai báo? Khi tôi bắt đầu viết mã html, tôi gặp vấn đề này và đó là do không có tài liệu khai báo. Sở thích của tôi là:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>