web-dev-qa-db-ja.com

Internet ExplorerでCSS3変換プロパティが異なる動作をする

次のCSSを使用して、divをページの中央に配置しています。

.someWrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.centredDiv {
    width: (some width);
    height: (some height)
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

これをChrome、Firefox、Safariでテストしましたが、意図したとおりに機能します。ただし、Internet Explorer（IE11でテスト）では、divをウィンドウの中央に中央に配置しますが、IEは、見えない 'ゴーストdiv'が50％以上あると考えているようです。変換されていない50％ダウン。

これにより、画面の右下隅に白いオーバーフロースペースと不要なスクロールバーが大量に表示されます。 overflow：hiddenを有効にすると、問題を解決できますが、私のWebサイトでは実行可能なオプションではありません。

では、なぜIEがこれを行うのか、それを回避する簡単な方法はありますか？

編集：次のコードは問題を示しています。 ChromeまたはFirefoxでコードを開きます。オーバーフローはありません。IE（IE11でテスト中）で開くと、オーバーフローが発生し、空白とスクロールが発生します。下部と右側のバー。

<!DOCTYPE HTML>
  <html>
    <head>
     <style>
       html, body {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
       }

       #wrapper {
         width: 100%;
         height: 100%;
         position: relative;
       }

       #centred {
         width: 90%;
         height: 90%;
         position: absolute;
         top: 50%;
         left: 50%;
         background-color: red;
         -webkit-transform: translate(-50%, -50%);
         -moz-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
       }
     </style>
   </head>
 <body>
   <div id="wrapper">
     <div id="centred">
       Hello world!
     </div>
   </div>
 </body>
</html>
cssinternet-explorertransform
22
AzzyDude

より簡単なアプローチ

topとleftから配置する代わりに、bottomとrightから配置します。これが完了したら、-50%翻訳をポジティブ50%に変更するだけです。これにより、オーバーフローが削除されます。

.center-center {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

これらの変更の動作は、ここで確認できます： http://jsfiddle.net/bd17gsss/

このバグがまだ報告されていることは注目に値します。時間とサイクルで許可された場合、チームは引き続き適切な考慮を行います。

元の回答

この特定のデモでは、position: absoluteにレイアウトのバグがあるようです。本来あるべきではないときにposition: relativeと同様に動作します。 Internet Explorerチームがさらに調査するために、この問題に関するバグをオープンしました。

現時点では、位置の値をabsoluteからfixedに切り替えることができます。これにより、中央の要素が正しくレンダリングされるように見えます。これにより、固定された一連のディメンションを繰り返し使用する必要がなくなり、代わりに、このアプローチを、適用されるすべてを中心とする汎用.modalスタイルクラスとして使用できます。

この変更の明らかな注意点は、要素がビューポートに従って配置され、ドキュメント自体ではなくなることです。これにより、画面上で効果的にフリーズします。

.modal {
    position: fixed;
    top: 50%; left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

このアプローチがさまざまな次元で成功していることを示すために、いくつかのサンプルセットを繰り返し実行し、要素のレンダリングをテストして、要素が適切に中央に配置されていることを確認します。

(function () {

    var xandy,
        index = 0,
        modal = document.querySelector( ".modal" ),
        sizes = [
            { x: "50%"  , y: "30%"   },
            { x: "400px", y: "288px" },
            { x: "25vw" , y: "75vh"  },
            { x: "90%"  , y: "90%"   }
        ];

    setInterval(function changeSize () {
        xandy = sizes[ index++ % sizes.length ];
        modal.style.width = xandy.x;
        modal.style.height = xandy.y;
    }, 1000 );

}());

最終結果はここでオンラインで見ることができます： http://jsfiddle.net/jonathansampson/c00u5ev8/

27
Sampson

他の誰かがまだこの問題を回避しようとして楽しんでいる場合（Internet Explorerのバグは、代わりに回避する必要があるため、修正されないことを確認してください）、あなたはposition: relative; の代わりに position: absolute;、または下と右ではなく上と左、代わりにこれを試してください：

.centredDiv {
    position: relative;
    top: calc(50% - 100vh);
    left: calc(50% - 100vw);
    transform: translate(-50%, -50%) translate(100vw, 100vh);
}

100のビューの高さ/ビューの幅、または理論上の最大スクロールの高さ/幅を表す任意のピクセル値を使用して、上/左の値が親をオーバーフローしないようにし、トランスフォームでオフセットすることができます。

ヒトラー、スターリン、およびInternet Explorerでエレベーターにいて、銃が1発しかない場合は... Internet Explorerを殺します。

2
JacDek

別のスレッドでこの質問に実際に答えただけであれば、display: table;およびdisplay: table-cell;この問題を解決するには（クロスブラウザーでも機能します！）、ここで私のライブコードを参照してください： http://codepen.io/TheDutchCoder/pen/GggWqP

あなたの場合は次のようになります：

#wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

#centred {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
2
Reinier Kaper

私にとっては、IE 11で変換が機能しないという問題は、単にページが互換モードで自動的に実行されていたため、IE 11がCSSでの翻訳をサポートしていない古いブラウザでした。

私の修正は、単にこのタグを頭に置くことでした：

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

これは、IEが「最新の」コードを使用して実行するように指示します。つまり、IE 11はIE = 11コード。ブラウザの古いバージョンではありません。

IEの特定のバージョンへの互換性を凍結したい場合は、異なる「コンテンツ」値を使用して、このタグでそれを行うことができます。値「IE-Edge」は、利用可能な最新のコード。

ページが互換モードでレンダリングされているかどうかを確認するには、F12キーを押してブラウザーで開発者ツールを起動し、[コンソール]タブに切り替えて、ページをリロードします。コンソールタブには次のように表示されます。

http://yoursite.com is running in Compatibility View because ...

実際に互換モードで実行されている場合。

0
BI Developer

あなたのコードはあまりにも短縮されており、実際の例がないため、アドバイスを提供するのは困難です。 (some dynamic height/width)一部、つまり、これはあなたの問題が発生する可能性のある場所として私を襲います。

参考として、Microsoftの IEでの変換 の説明を参照してください。

0
Douglas Denhartog

変換ラインの下にtransition: all .2s ease-in-out;を追加するだけです。

0
Hieu Tran AGI