{}

Tạp chí tiếng Việt dành cho Web Designers.
Thứ Năm ngày 4 Tháng 12 năm 2008
Border và những điều bạn chưa biết

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.

Border và những điều bạn chưa biết

Đô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.

(Tổng hợp)
 

Vài nét về tác giả

Chu Huu Trung Chào tất cả các bạn, tên tôi là Chu Hữu Trung. Thiết kế Web là nghề của tôi, hiện nay tôi đang sống và làm việc tại Hà Nội (Việt Nam). Tôi rất vui khi các bạn ghé thăm cssyeah.com

Free icons

Free icons Với những bộ icon này bạn sẽ làm cho các dự án của bạn thêm sinh động hơn.