{CSSYeah:com;} Tạp chí tiếng Việt dành cho Web designer

Giả sử rằng tôi có một thẻ <div class="border"> với định dạng CSS như sau:

div.border {
  display: block;
  width: 1px;
  height: 1px;
  background: #FFF;
  border-top: 1px solid #F00;
  border-right: 1px solid #0F0;
  border-bottom: 1px solid #00F;
  border-left: 1px solid #000;
  overflow: hidden; 
}

Các bạn có nghĩ rằng nó sẽ hiển thị giống nhau trên mọi trình duyệt hay không?

Câu trả lời của chúng ta là không, điều này có thể bạn không tin nhưng đó là một thực tế và đã được kiểm trực qua thực nghiệm. Nếu chúng ta nhìn thoáng qua thì sẽ không thấy điều đó, nhưng khi bạn có thể phóng to thẻ <div> nhiều lần thì bạn sẽ thấy điều đó. Dưới đây là một số kết quả thấy được khi xem bằng nhiều trình duyệt khác nhau.

Đôi khi những điều này lại làm chúng ta rất đau đầu trong việc fix các lỗi giữa các trình duyệt. Khi bạn gặp trường hợp thừa hoặc thiếu một pixel trên layout của bạn thì khi đó bạn hãy nhớ tới bài viết này của chúng tôi.