2013-09-23 116 views
8

Tôi có kiểu nàyCSS biến đổi không làm việc IE

.rotate div img 
{ 
    -webkit-transform: translate(-18cm, 2cm) rotate(-90deg); /* WebKit */ 
    -webkit-transform-origin: top right; 

    -moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */ 
    -moz-transform-origin: top right; 

    -o-transform: rotate(90deg); /* Opera */ 
    -o-transform-origin: top center; 

    -ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */ 
    -ms-transform-origin: top right; 

    -sand-transform: translate(-18cm, 2.5cm) rotate(-90deg); 
    -sand-transform-origin top right; 

    max-width: 100% !important; 

} 

Tôi đang gặp rắc rối với trình duyệt IE, các biến đổi được áp dụng và được hiển thị trên màn hình nhưng khi tôi bấm vào nút in, kết quả in là mà không có biến đổi áp dụng cho nó.

(thêm màn hình trong giới truyền thông để xem hiệu ứng, trước khi in)

Nó hoạt động tốt với Firefox và Chrome

EDIT

Vâng, tôi đã được thử nghiệm trên IE9.

Sau khi chơi với nó nhiều hơn một chút ngày hôm qua, tôi nhận thấy rằng hình ảnh đã thực sự thực hiện phần chuyển đổi, nhưng những gì được gửi tới máy in là hình ảnh không có biến đổi được áp dụng cho nó.

+0

câu hỏi Loaded, nhưng phiên bản của IE được bạn gặp vấn đề với? Chỉ 'IE9' và' IE10' có hỗ trợ cơ bản và chỉ 'IE10' có hỗ trợ 3D: https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility – kunalbhat

+0

[Đây là một liên quan câu hỏi về IE9 không in biến đổi] (http://stackoverflow.com/q/7868988/2930477) – misterManSam

Trả lời

6

-ms-transform không tồn tại trong IE10 +. IE8 trở lên không hỗ trợ chuyển đổi CSS, IE9 chỉ sử dụng -ms-transform và IE10 và mới hơn chỉ sử dụng transform chưa được sửa lỗi.

Xem http://caniuse.com/#feat=transforms2d để biết thêm thông tin nếu cần.

-5

Không cần tiền tố ưa thích, chỉ cần sử dụng biến đổi bình thường để nhắm mục tiêu MS IE!

0

Tôi có cùng một vấn đề nhưng giải quyết bằng cách thiết lập thuộc tính phương tiện truyền thông vào thẻ phong cách như sau

<style type="text/css" media="print">