Trình duyệt web của ngày hôm nay đã đi một chặng đường dài từ những ngày điên rồ mà bất kỳ loại sự nhất quán qua trình duyệt nào đều là suy nghĩ mơ ước. Các trình duyệt web ngày nay đều tuân thủ rất chuẩn. Họ chơi độc đáo với nhau và cung cấp một hiển thị trang khá nhất quán trên các trình duyệt khác nhau. Điều này bao gồm các phiên bản mới nhất của Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari và các trình duyệt khác nhau được tìm thấy trên vô số các thiết bị di động đang được sử dụng để truy cập trang web hiện nay.
Trong khi tiến trình chắc chắn đã được thực hiện khi nói đến các trình duyệt web và cách chúng hiển thị CSS, vẫn còn mâu thuẫn giữa các tùy chọn phần mềm khác nhau này. Một trong những mâu thuẫn phổ biến là cách các trình duyệt đó tính toán lề, đệm và đường viền theo mặc định.
Do các khía cạnh này của mô hình hộp có hiệu lực tất cả các phần tử HTML và vì chúng rất cần thiết trong việc tạo bố cục trang, một màn hình không nhất quán có nghĩa là một trang có thể trông tuyệt vời trong một trình duyệt nhưng trông hơi khác. Để chống lại vấn đề này, nhiều nhà thiết kế web chuẩn hóa các khía cạnh này của mô hình hộp. Thực hành này còn được gọi là "zeroing out" các giá trị cho lề, đệm và đường viền.
Lưu ý về mặc định của trình duyệt
Tất cả các trình duyệt web đều có cài đặt mặc định cho một số khía cạnh hiển thị nhất định của trang. Ví dụ: siêu kết nối có màu xanh lam và được gạch dưới theo mặc định. Điều này là nhất quán trên các trình duyệt khác nhau, và mặc dù nó là thứ mà hầu hết các nhà thiết kế thay đổi cho phù hợp với nhu cầu thiết kế của dự án cụ thể của họ, thực tế là tất cả chúng đều bắt đầu với cùng mặc định giúp dễ dàng thực hiện những thay đổi này. Đáng buồn thay, giá trị mặc định cho lề, đệm và đường viền không được hưởng mức độ nhất quán của trình duyệt chéo nhất quán.
Bình thường hóa các giá trị cho lề và đệm
Cách tốt nhất để giải quyết vấn đề mô hình hộp không phù hợp là đặt tất cả các giá trị lề và giá trị đệm của các phần tử HTML thành 0. Có một vài cách mà bạn có thể làm điều này là thêm quy tắc CSS này vào biểu định kiểu của bạn:
* {margin: 0; padding: 0; }Quy tắc CSS này sử dụng ký tự * hoặc ký tự đại diện. Nhân vật đó có nghĩa là "tất cả các phần tử" và về cơ bản sẽ chọn mọi phần tử HTML và đặt lề và đệm thành 0. Mặc dù quy tắc này rất không xác định, vì nó nằm trong bảng định kiểu bên ngoài của bạn, nó sẽ có độ đặc hiệu cao hơn trình duyệt mặc định giá trị làm. Vì những mặc định đó là những gì bạn đang ghi đè, kiểu này sẽ hoàn thành những gì bạn đang thiết lập để làm.
Một tùy chọn khác là áp dụng các giá trị này cho các phần tử HTML và phần thân. Bởi vì tất cả các phần tử khác trên trang của bạn sẽ là con của hai phần tử này, nên CSS thác nên áp dụng các giá trị này cho tất cả các phần tử khác đó.
html, body {margin: 0; padding: 0; }Điều này sẽ bắt đầu thiết kế của bạn ở cùng một vị trí trên tất cả các trình duyệt, nhưng một điều cần nhớ là khi bạn tắt tất cả lề và đệm, bạn sẽ cần phải bật lại chúng cho các phần cụ thể của trang web của bạn để đạt được giao diện và cảm thấy rằng thiết kế của bạn kêu gọi.
Biên giới
Bạn có thể nghĩ "nhưng không có trình duyệt nào có đường viền xung quanh phần tử nội dung theo mặc định". Điều này là không đúng sự thật. Các phiên bản Internet Explorer cũ hơn có đường viền trong suốt hoặc vô hình xung quanh các phần tử. Trừ khi bạn đặt đường viền là 0, đường viền đó có thể làm hỏng bố cục trang của bạn. Nếu bạn đã quyết định rằng bạn sẽ tiếp tục hỗ trợ các phiên bản cũ của IE, bạn sẽ cần phải giải quyết vấn đề này bằng cách thêm phần sau vào cơ thể và các kiểu HTML:
HTML, body {
lề: 0px;
padding: 0px;
đường viền: 0px;
}
Tương tự như cách bạn đã tắt lề và đệm, kiểu mới này cũng sẽ tắt đường viền mặc định. Bạn cũng có thể làm điều tương tự bằng cách sử dụng bộ chọn ký tự đại diện được hiển thị trước đó trong bài viết.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa bởi Jeremy Girard vào ngày 27/9/2016.