0

たとえば、 jsfiddleを参照してください。

画面の中央に表示されるポップアップ メッセージをレンダリングしようとしています。

問題: IE9 は左側にレンダリングし、IE8 は中央に正しくレンダリングします。Chrome と Firefox も中央に表示されます。

要素の CSS コード (.cPUParent):

.cPUParent {
  position: absolute;
  bottom: 20px;
  left: 5px;
  right: 0;
  width: auto;
  max-width: 187px;
  height: auto;
  padding: 5px 10px 0 15px;
  border: 2px solid #571C54;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(109,49,107);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    /* opacity in IE 8 */
  filter: alpha(opacity=0);  /* opacity in IE 5-7 */
  opacity: 0;
  z-index: 0;
}
4

2 に答える 2

1

.cPUParent クラスで「max-width」を「width」に変更すると、IE9 で動作するようになります。

http://jsfiddle.net/rLwvP/

.cPUParent {
  width: 187px;
}
于 2012-12-04T13:55:56.973 に答える
1

考慮しなければならないのは、オブジェクトの高さと幅です。固定幅を設定できる場合は、非常に簡単です。これは、ie8および9で機能するソリューションです。

    .cPUParent {
        position: absolute;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: 100px;
        height: 100px;
        margin-left: -64.5px;
        margin-top: -54.5px;

        padding: 5px 10px 0 15px;
        border: 2px solid #571C54;
        border-radius: 5px;
        background-color: #6D316B;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        z-index: 999;
    }

説明: 高さと幅 (この例では 100px) を設定できる場合は、画面の境界線の左から 50%、上から 50% に押し込む必要があります。

        top: 50%;
        left: 50%;

これを行うと、ボックスの左上隅がその 50%/50% ポイントに設定されるため、ボックスを引き上げて少し左に移動する必要があります (ボックスの高さと幅の半分)。(これを解決するときは、ボックス モデルを考慮してください。パディングと境界線はすべて、オブジェクトの幅と高さに追加されます)

        margin-left: -64.5px;
        margin-top: -54.5px;

他のカスケード スタイルが適用されている場合に備えて、下と右の値を auto にリセットする必要があります。

        right: auto;
        bottom: auto;

コードの残りの部分は、元のスタイルです。

        padding: 5px 10px 0 15px;
        border: 2px solid #571C54;
        border-radius: 5px;
        background-color: #6D316B;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        z-index: 999;

不透明度が 0 (ゼロ) に設定されているため、現時点では何も表示されないことを忘れないでください。

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;

そして、それはそれを行う必要があります。

于 2012-12-04T13:57:51.343 に答える