web-dev-qa-db-ja.com

CSS変換が機能しない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;

}

IEに問題があり、変換が適用されて画面に表示されていますが、印刷ボタンをクリックすると、変換が適用されていない結果が印刷されます。

（印刷する前に、効果を確認するためにメディアに画面を追加しました）

FirefoxとChromeで正常に動作します

[〜＃〜]編集[〜＃〜]

はい、IE9でテストしていました。

昨日もう少し遊んでみたところ、画像が実際に変換部分を実行していることに気付きましたが、プリンターに送信されるのは、変換が適用されていない画像です。

cssinternet-explorermedia-queriestransform
9
CheGueVerra

-ms-transformはIE10 +には存在しません。 IE8以前はCSS変換をサポートしておらず、IE9は-ms-transformのみを使用し、IE10以降は接頭辞なしのtransformのみを使用します。

必要に応じて、詳細については http://caniuse.com/#feat=transforms2d を参照してください。

7
Mooseman

同じ問題がありますが、次のようにスタイルタグにメディア属性を設定することで解決しました

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