Xoay văn bản bằng CSS và IE

Question

Tôi cần xoay văn bản bằng CSS. Tôi có các quy tắc kiểu sau nhưng chúng dường như không hoạt động trong Internet Explorer.

.footer #descr span { 
    -moz-transform: rotate(-20deg); /* Firefox */ 
    -o-transform: rotate(-20deg); /* Opera */ 
    -webkit-transform: rotate(-20deg); /* Safari y Chrome */ 
    transform: rotate(-20deg); /* Safari y Chrome */ 
    font-size:40px; 
    display:block; 
    float: left; 
    margin: 0 10px 0 0; 
} 

Làm cách nào để xoay văn bản trong IE bằng CSS?

Answer 1

phiên bản cũ của trình duyệt IE (8 và dưới đây) không hỗ trợ CSS3

Answer 2

IE không hỗ trợ một số tính năng của giải pháp CSS3.The: để cho nó làm suy giảm một cách duyên dáng trong IE và cho mọi người với một trình duyệt hiện đại thưởng thức các trang web hiện đại .

Answer 3

Để làm việc này trong IE < 9 bạn sẽ cần phải sử dụng giấy CSS Sand, mà là một polyfill cho biến đổi CSS: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Answer 4

Dưới IE9, Internet Explorer có hiệu quả không hỗ trợ sẵn có cho CSS3 hoặc bất kỳ khác tiêu chuẩn công nghệ web như SVG cho phép bạn xoay nền tảng văn bản theo ý muốn. Microsoft đã bao gồm hai cách để xoay các yếu tố (ví dụ text) từ IE6, tuy nhiên phương pháp đơn giản hơn chỉ hoạt động trong từng bước trên 90 độ, như vậy:

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */ 

Nếu bạn thực sự cần phải đạt được mà 340/-20 độ bạn đã bao gồm trong ví dụ của bạn sau đó bạn sẽ cần phải thử tay của bạn tại một cái gì đó khó khăn hơn, tài liệu ở đây: MSDN Matrix Filter. Với diện mạo phức tạp không cần thiết, tìm kiếm nhanh trên Google đã tiết lộ một máy tính đẹp sẽ tạo ra quy tắc CSS -ms-filter cho bạn: Matrix Calculator.

Hãy nhớ rằng cả hai tính năng này có nghĩa là không được dùng nữa trong IE9 mà tôi tin rằng hỗ trợ -ms-transform thay thế. Tùy thuộc vào việc Microsoft định nghĩa không được chấp nhận như đã xóa hoặc được khuyên dùng cho bạn có thể muốn kiểm tra xem IE9 có đang xoay văn bản của bạn hai lần hay không.

.footer #descr span { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */ 
    -ms-transform: rotate(-20deg); /* IE9+ */ 
    -moz-transform: rotate(-20deg); /* Firefox */ 
    -o-transform: rotate(-20deg); /* Opera */ 
    -webkit-transform: rotate(-20deg); /* Safari & Chrome */ 
    transform: rotate(-20deg); 
    font-size:40px; 
    display:block; 
    float: left; 
    margin: 0 10px 0 0; 
} 

Mặc dù vậy, nếu bạn có ý định sử dụng HTML5 và/hoặc CSS3 thì tôi đồng ý với câu trả lời của Duopixel bao gồm thư viện CSS3 qua javascript. Với những người dùng Windows XP không thể nâng cấp qua IE8 thì đó là một ý tưởng tốt cho bất kỳ trang web thương mại nào để hỗ trợ nó.

Answer 5

Điều duy nhất mà làm việc cho tình hình của tôi là sử dụng CSS giấy nhám - một khi tôi đã có tích hợp, tôi đã cố gắng mã CSS sau ...

#vertbar p.name { 
    -sand-transform: rotate(180deg); 
} 

và thì đấy! IE xoay văn bản theo chiều dọc, đọc từ dưới lên trên. Tuy nhiên, trong tất cả các trình duyệt khác, định hướng này được coi là 270 độ.

bây giờ tôi đã có các trình duyệt khác xoay văn bản ở một góc độ khác nhau để IE, như nếu hệ thống IE phối hợp là back-to-front (Tôi sẽ không ngạc nhiên ...)

tôi nghĩ rằng tôi d thử nhận xét có điều kiện để chỉ phân phát quy tắc -sand-transform cho trình duyệt IE. Vì lý do gì, IE bỏ qua điều này và vì vậy việc xoay vòng thậm chí không được áp dụng (IE10 có bỏ qua các nhận xét có điều kiện không?)

Vì vậy, bây giờ tôi đã gặp phải tất cả các trình duyệt để thực hiện điều đó. Sắp xếp thứ tự các quy tắc và đặt 180 độ cho IE và 270 độ cho những người khác, cuối cùng tôi đã có quy tắc CSS làm việc để xoay văn bản theo chiều dọc, đọc từ dưới lên trên, trong Firefox, Chrome, Safari và IE!

#vertbar p.name { 
    -sand-transform: rotate(180deg); 
    -webkit-transform: rotate(270deg) !important; 
    -moz-transform: rotate(270deg) !important; 
    -o-transform: rotate(270deg) !important; 

    font-size: 14px; 
    text-transform: capitalize; 
    display: block; 
    white-space: nowrap; 
    height: 330px; 
    text-align: left; 
    color: #FFF; 
    line-height: 40px; 
    margin-top: 0px; 
} 

Hoan hô! Hy vọng rằng đây là giúp đỡ cho một ai đó, tôi lãng phí hơn 2 giờ cố gắng để có được điều này được sắp xếp. : P

Cập nhật: Chỉ muốn chỉnh sửa - 270 độ là 270 độ trong tất cả các trình duyệt. Tôi phát hiện ra rằng tôi đã có một quy tắc khác với vòng quay 90 độ, được thêm vào quy tắc thứ hai là 180 độ, để cho tổng cộng là 270. Vì vậy, thật thú vị khi lưu ý giá trị xoay là tương đối (bổ sung?) Thay vì tuyệt đối.

Answer 6

này làm việc cho IE:

-ms-transform: rotate(-20deg);