IE8と比較して、絶対位置要素はサファリの異なる位置に表示されます

css html position
IE8と比較して、絶対位置要素はサファリの異なる位置に表示されます

www.zabb.co.uk/test2b.htmlの場合、displayDivは、SafariよりもIE8の方が上に表示されます。 まったく同じ垂直位置に表示されるようにするにはどうすればよいですか? 前もって感謝します。

  0  0


ベストアンサー

私はあなたのページを調べていませんので、cssに問題があるかもしれませんが、2つのブラウザーはまったく異なると思います。

次のいずれかをお勧めします。

1)特定の要素を正確な絶対位置にする必要がないようにページを設計します(より相対的な配置を使用します)

2)条件付きコメントを使用してラッパークラスをページに追加し、divを調整する新しいcssルールを記述します。

.ie8 #myAbsoluteDiv {
    top: /* something different from safari */
}

0


要素は `top:50%`に配置されます。つまり、ページの読み込み時に、ボックスの上部がウィンドウの表示領域(「ビューポート」)の半分下に配置されます。

これはかなり標準的なCSSであり、両方のブラウザーで正常に機能するはずです。

ただし、位置は表示されているブラウザーウィンドウのサイズに基づいているため、同じ画面で両方を最大化した場合でも、2つのブラウザーは異なる量のスペースを使用するため、正確な位置はブラウザーによって異なりますツールバーなど、したがってブラウザのビューポートのサイズは異なります。

これが最も見られる理由です。ブラウザは両方とも正常に動作しています。ビューポートのサイズが異なるため、同じ指示に従っているだけです。

また、ブラウザウィンドウのサイズを変更しても同じ効果が得られます。また、これは、同じブラウザでも、画面解像度が異なるユーザの表示が異なることを意味します。

この効果には本質的に問題はありません。何かを50%に配置しようとすると、ウィンドウのサイズに応じて自然に異なる位置に配置されます。 これは、画面サイズに関係なく、すべてのユーザーに表示され、中央に表示されることを保証できるため、実際には良いことです。

ただし、この効果を防​​ぎたい場合は、パーセンテージではなく、 `top`スタイルに固定ピクセル値を使用することをお勧めします。

「絶対」に配置したいが、ウィンドウサイズではなくページ全体に対して配置したい場合は、その外側の要素(おそらく「body」要素)を「position:relative;」にする必要があります。 次に、ビューポートに対してではなく、それに対してボックスの絶対位置を測定します。

お役に立てば幸いです。

0


タイトルとURLをコピーしました