1

こんにちは皆さん、divを回転させて上に移動させると思われるコードをいくつか取得しました。IE 以外のすべてのブラウザで動作します。どんな助けでも素晴らしいでしょう。

   function rotate(degree) {
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)'
    });
    console.log(degree);
    if (degree < 55) {
        timer = setTimeout(function() {
            rotate(++degree)
        }, 10)
};

};

4

3 に答える 3

1

質問で提供したコードは、IE9 で動作するはずです。

私が考えることができる唯一の理由は、IE9 が実際に IE8 互換モードでレンダリングされている場合です。

これは、実際には非常に一般的な問題です (特に開発者にとっては、IE はデフォルトでローカル ネットワーク上のサイトの互換モードに設定されており、通常は開発サーバーが含まれます)。

確認するには、開発ツール メニュー (F12) を開き、右上を見てください。ブラウザモードが表示されます。「IE9 Standards」以外の場合は、修正する必要があります。この迷惑なデフォルトは、次のようにオフにできます。

  • 「ツール」メニューを選択し、
  • 互換表示設定を選択します。
  • 互換モードを有効にするオプションのチェックを外します。

ページにメタ タグを追加して、IE が他のユーザーに対して標準モードを使用するように強制することもできます。

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

これらの対策を講じると、ページは IE9 標準モードでレンダリングされ、標準の CSS ローテーションを使用できるようになります。

それが役立つことを願っています。

于 2012-12-08T00:06:20.743 に答える
0

使用している IE ブラウザのバージョンを教えてください。コードは IE9 で正常に動作するはずです。他のバージョンの IE の CSS にこれを追加してみてください。

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

したがって、コードでは次のようになります。

   function rotate(degree) {
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)',
        'filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)', /* IE7  Note this is the code for 45 degree */
        '-ms-filter': "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8  Note this is the code for 45 degree  */
    });
    console.log(degree);
    if (degree < 55) {
        timer = setTimeout(function() {
            rotate(++degree)
        }, 10)
};

参照:

CSS3 変換: 回転; IE9で

IE の CSS 回転プロパティ

于 2012-12-07T23:32:36.683 に答える
0

試す

if($.browser.msie){
    $elie.css({ msTransform: 'rotate(' + degree + 'deg)' });
}else{
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)'
    });
}
于 2012-12-07T23:32:51.727 に答える