2015-03-02 14 views
6

Tôi có mixin sau cho qua trình duyệt transform:Có polyfill cho css chuyển đổi sở hữu trong IE8

.transform (...) { 
    -webkit-transform: @arguments; /* Chrome, Opera 15+, Safari 3.1+ */ 
     -moz-transform: @arguments; /* Firefox 3.5+ */ 
     -ms-transform: @arguments; /* IE 9 */ 
     -o-transform: @arguments; /* Opera 10.5+ */ 
      transform: @arguments; /* Firefox 16+, IE 10+, Opera */ 
} 

.translate(@x:0, @y:0) { 
    .transform(translate(@x, @y)); 
} 

Và áp dụng nó giống như sau:

#main { 
    .translate(280px, 0); 
} 

Nhưng nó không wotk trong IE8 and Opera mini. Có một số dự phòng, polyfill hoặc bất kỳ để hỗ trợ nó trong các trình duyệt đó?

+0

kiểm tra http://www.useragentman.com/IETransformsTranslator/ – Nooh

+1

Đối với IE6 + có 'bộ lọc: progid: DXImageTransform.Microsoft.Matrix' có thể mô phỏng nhiều hiệu ứng chuyển đổi css3. – pawel

Trả lời

9

Có một vài bạn có thể sử dụng, những gợi ý từ modenizer là:

css sandpapertransformie.

Tôi cho rằng, việc thêm pollyfills vào trình duyệt cũ hơn như ie8 sẽ làm hỏng hiệu suất của trình duyệt đã qua và làm giảm trải nghiệm người dùng. Ngoài ra, nếu bạn đang thêm pollyfills vào trình duyệt di động bạn đang thêm vào thời gian tải mà trong một kết nối 3g có thể đưa người dùng đi.

+4

Bạn có thể phát hiện nếu trình duyệt là IE8 và chỉ nạp polyfill trong trường hợp đó. Lập luận của bạn cho mạng di động 3G là tranh luận. – user2867288

+0

sau câu trả lời này, tôi đã đi với giấy nhám css và đã có một thời gian helluva gỡ lỗi 400 yêu cầu xấu - hóa ra rằng dòng sau 'req.setRequestHeader (" If-Modified-Since "," Sat, 1 Jan 2000 00:00 : 00 GMT ");' cần phải là 'req.setRequestHeader (" If-Modified-Since "," Sat, 01 Jan 2000 00:00:00 GMT ");' - sau đó nó hoạt động! –

Các vấn đề liên quan