Tôi đang kéo tóc ra trên cái này.Hình nền của IE (7?) Làm méo mó từ sprites?
Chúng tôi sắp hoàn thành việc phát triển đại tu cho trang web của mình. Như một bước cuối cùng, chúng tôi đang cố gắng để bọc tất cả các glyphs và các biểu tượng vào một sprite. Tất cả chúng đều trong suốt .png thì cũng vậy. Có vẻ như nếu một nền xuất phát từ một sptire, IE sẽ bóp méo nó. Nếu nó đến từ tập tin gốc, nó không. FF và Chrome cũng tốt.
Tôi đang xem hình ảnh gốc và phiên bản được in song song với lưới để thấy rằng các pixel giống hệt nhau. Tôi đã đếm các pixel trong sprite nhiều lần để đảm bảo rằng tôi đang sử dụng tọa độ đúng. CSS của tôi trông giống như sau:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
'XX' cho phép tôi chuyển đổi qua lại. Với phiên bản một tệp, nó trông hoàn hảo: 
. Phiên bản sprite trông giống như sau: 
. Có vẻ như nó 'bị đánh bại' cả theo chiều dọc và chiều ngang. Điều này không xảy ra trong FF hoặc Chrome.
Bất kỳ ý tưởng nào?
CHỈNH SỬA Tôi có thể loại bỏ hầu hết tiếng ồn và đăng một ví dụ here. Tôi đã thêm ghi chú vào ví dụ để mô tả sự cố của mình.
Cảm ơn bạn đã dành thời gian để xem xét điều này!
CẬP NHẬT Chúng tôi đã kể từ khi thay thế những 'hình ảnh chia chồng chéo' với CSS pseudo-classes rằng thực sự chồng chéo và các vấn đề phóng to dường như đã biến mất. Tất nhiên bây giờ chúng ta có những vấn đề mới - IE8 nhận được thứ tự z sai và IE7 không hiểu các yếu tố psuedo. Nhưng ít nhất việc đánh dấu đơn giản hơn và vấn đề phóng to đã biến mất.
Với tôi, điều đó có vẻ ít bị "xếp" hơn và giống như bù đắp một pixel dọc theo cả hai trục. Có một điểm x-offset không bằng pixel không đồng ý với điều đó, nhưng nó có thể đáng để kiểm tra lại phép toán sprite của bạn, nếu bạn chưa có. –
@Ben: Đó là một gợi ý tuyệt vời và chúng tôi đã được noodling với những con số. Khi chúng ta di chuyển Y lên hoặc xuống 1px, chúng ta thấy rõ ràng một đường ngang màu đen trên cùng hoặc dưới cùng mà chúng ta mong đợi từ việc thiếu hình ảnh. Trong trường hợp này, sự biến dạng thậm chí còn xuất hiện 'sub-pixel' nếu điều đó có thể xảy ra! – n8wrl
Bạn có thể nhận được một ví dụ làm việc cho thấy vấn đề, một nơi nào đó giống như jsfiddle.net, nói không? Thật lạ lùng; nó trông giống như một cái gì đó của thêm một hiệu ứng bevel bằng cách nào đó. –