Có một khoảng cách nào được đề xuất về khoảng cách giữa các CSS sprites không?

Question

Thông thường nếu tôi tạo CSS sprites, tôi xếp tất cả chúng lên cạnh nhau mà không có khoảng cách nào cả. Ví dụ: nếu tất cả các hình ảnh là 10x10 pixel, tôi sẽ đặt chúng ở tọa độ 0,10; 0,20; 10,10; 10,20.

Nhưng điều này dường như gây ra sự cố trong một số trường hợp nhất định. Ví dụ trong quá trình phóng to trang và trên thiết bị di động, bạn có thể thấy cạnh của sprite tiếp theo.

Tại sao sự cố này xảy ra, có phải do lỗi làm tròn không? Chỉ đơn giản là thêm khoảng cách xung quanh các sprites cách tốt nhất để tránh vấn đề? Nếu vậy, có một khoảng cách tối thiểu hoặc được đề nghị chúng tôi nên có giữa các biểu tượng trong hình ảnh sprite?

Answer 1

Sprite Chảy máu có thể xảy ra khi thu phóng do làm tròn, đặc biệt là trong IE (các phiên bản cũ chỉ đơn giản là tròn đến số nguyên gần nhất, e.G. giá trị được tính là 20.343px sẽ được hiển thị là 20px).
Vì lỗi làm tròn không bao giờ lớn hơn 1px, với phần đệm là 1px trên tất cả các mặt, bạn đã có thể khắc phục sự cố đó.

Trình duyệt hiện đại sử dụng phương pháp được gọi là hiển thị pixel phụ để giảm thiểu vấn đề này.

Answer 2

Sẽ dễ dàng hơn để duy trì các CSS sprites được lưu trữ trong các hộp 50px x 50px hoặc 100px x 100px.

• Giúp tổ chức các hình ảnh có liên quan bằng sprite.
• Bạn có thể sao chép dán kiểu trước và chỉ thay đổi một chữ số cho kiểu mới.
• Bạn sẽ không cần tìm thủ công vị trí pixel hoàn hảo theo cách thủ công.
• Nó cũng sẽ tránh các trường hợp có vấn đề đôi khi, bạn không thể kiểm soát chiều rộng/chiều cao của phần tử html và nó cho thấy các phần không mong muốn khác của hình ảnh ma.

ví dụ:

div.test { 
    background-image: url(image.png); 
    background-position: 100px 0px; 
} 
div.test:hover { 
    background-position: 100px 100px; /* Simple relation with previous style */ 
} 

div.box1 { 
    background-image: url(image.png); 
    background-position: 200px 0px; 
} 
div.box2 { 
    background-image: url(image.png); 
    background-position: 300px 0px; /* No efforts required to find out perfect pixel position */ 
}