-1

マージンに問題があります：自動-垂直方向のセンタリング #something { width: 97%; height: 300px; border: 1px solid red; position: absolute; top: 0; bottom: 0; margin: auto; }

これはすべての最新のブラウザで機能します-ページ（ビューポート）が300pxより高く、垂直方向に中央に配置されますが、ページ（ビューポート）が300pxより低くなると、Firefoxを除くすべての場所で機能します...おそらくそれは悪い機能ですが、その論理的な機能）他のブラウザでは、中央に配置された要素の上部がビューポートの上部に表示されなくなります。

http://jsfiddle.net/LhHed/2/これは神の例です-結果ウィンドウのサイズを変更すると、Firefoxではうまく機能しますが、他のブラウザではうまく機能しません。可能性のあるtuはそれを修正しますか？それともFirefoxの悪い機能ですか？

編集：実例http://dev8.newlogic.cz

4

2 に答える 2

1

私が収集したものから、あなたは仕切りの上部をページの上部に表示したいと思っています。位置がに設定されているため、これは現在発生していませんtop:0; bottom:0;。topプロパティはプロパティと競合しbottom、最終的にはページの下部に仕切りを配置します。プロパティを削除するだけbottomで、要素の上部がビューポートの外側に表示されなくなります。

#something {
    width: 97%;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    margin: auto;
}

JSFiddle。

于 2013-02-28T11:35:50.420 に答える
0

position: relativebody要素を使用するときに、ブラウザの問題を削除しました。現在、Firefoxや他のブラウザでも動作しています。http://dev8.newlogic.czの実例

于 2013-02-28T13:46:23.927 に答える