Tôi vẫn cần phải đệm ảnh trong CSS Sprite?

Question

Trong CSS Sprites, bạn thường sẽ tìm thấy phần đệm giữa mỗi hình ảnh. Tôi tin rằng ý tưởng là để nếu trang được thay đổi kích thước thì một hình ảnh sẽ không chảy máu vào một hình ảnh khác.

Tôi nghĩ điều này tùy thuộc vào các loại trình duyệt khác nhau zoom (best explained by Jeff).

Tuy nhiên, tôi không thể thấy hành vi này trong các thử nghiệm của mình. Đây có phải chỉ là vấn đề với các trình duyệt cũ hơn không? (Tôi đã không thể thử nghiệm với IE6 tại thời điểm hiện tại vì vậy tôi tính đó là 'cũ').

Tôi có nên lo lắng về việc rời khỏi không gian? Đó là một loại đau.

Ví dụ:

Một CSS Sprite tôi tìm thấy cho AOL có đệm giữa mỗi hình ảnh: VIEW

nhưng The Daily Show quyết định không để bận tâm: VIEW

Answer 1

Nó không nên cần phải được đệm, nhưng khi thu phóng, đặc biệt là trong IE8 (betas nhiều hơn RC), có hình ảnh chảy máu nếu không có đệm.

Ví dụ tốt nhất là truy cập Google.com -> Tìm kiếm và thu phóng ... bạn sẽ bắt đầu thấy "gạch dưới" ở dưới cùng bên phải của hình ảnh khi thu phóng vòng lên/xuống.

Về mặt lý thuyết, đệm 1px trên tất cả các cạnh của một sprite sẽ ổn.

Đây là sprite từ Google (hình ảnh) ...

Nhưng khi thu nhỏ, dấu +, -, x biểu tượng chảy máu vào logo chính của Google.

Answer 2

Nói về trình duyệt cũ (những người sử dụng zoom văn bản), bạn không luôn luôn cần đệm.

Sự khác biệt chính giữa hai ví dụ của bạn là sprite Hiển thị hàng ngày đã bao gồm văn bản của mục menu trong chính hình ảnh đó.

Khi sử dụng thu phóng văn bản, các mục menu AOL có thể kéo dài theo chiều dọc do kích thước phông chữ lớn hơn và văn bản menu thậm chí có thể bao bọc thành hai dòng. Để thích ứng với các tình huống như vậy, các biểu tượng đó cần một phần đệm nhỏ để đảm bảo chúng không bị chảy máu. Thông thường, bạn chỉ cần chắc chắn rằng nó không bị chảy máu trên bất kỳ kích thước văn bản nào của IE6.

Vì trình đơn Hàng ngày không chứa bất kỳ văn bản HTML (hiển thị) nào của nó sẽ không bị ảnh hưởng bởi thu phóng văn bản (mặc dù bạn có thể cần line-height: 0; hoặc để chắc chắn), vì vậy không cần bất kỳ đệm.

Khi scunliffe đã được hiển thị, các trình duyệt sử dụng thu phóng trang có thể cần các sprites để có phần đệm nhỏ do lỗi làm tròn.

Answer 3

Về cơ bản, câu trả lời là có. Hai năm sau khi tôi hỏi câu hỏi này sẽ thấy bản phát hành của IE9. IE9 có vấn đề này cũng nhiều - nếu không nhiều hơn bất kỳ trình duyệt nào khác ...

Thật đáng sợ vì đó là một điều đơn giản để khắc phục.

Với iPad ngày càng tăng trong thị trường - nó khá cần thiết để có ít nhất một trải nghiệm phong nha với việc thu nhỏ số tiền không đồng nhất.

Tôi sẽ phải đặt một đường viền pixel duy nhất xung quanh mọi hình ảnh để phù hợp với màu nền của phần tử liền kề (có khả năng khác nhau ở mỗi bên). May mắn thay tôi tự động tạo ra tất cả các csssprites của tôi dựa trên một tập tin .xml - vì vậy tôi có thể làm điều này lập trình mà không có quá nhiều vội vàng. Nó vẫn là một nỗi đau lớn mặc dù ...

Answer 4

Simon - Kinh nghiệm của tôi là điều này chắc chắn vẫn là một vấn đề.

Để trả lời câu hỏi thứ hai của bạn, tại sao không sử dụng đệm trong suốt? (Có lẽ bạn vẫn đang hỗ trợ ie6 và điều này là không tầm thường, trong trường hợp này, tôi thực sự xin lỗi).