1

CSSでオーバーレイに取り組んでいて、クロスブラウザの問題が発生しました。オーバーレイの高さはビューポートの80％で、垂直方向の中央に配置する必要があります。（要素の高さは80％、上マージンは-40％、上から50％は絶対に配置されます）。

以下のフィドルはChromeでは機能しますが、Firefoxでは機能しません。問題はマージントップのパーセンテージにあるようです。完全な効果を確認するには、ブラウザのサイズを変更してください。

フィドル： http： //jsfiddle.net/DEn6r/1/

助けてくれてありがとう！

4

1 に答える 1

4

topとの両方にパーセンテージを使用しているのでmargin-top、それらを組み合わせて、単純にを使用できますtop: 10%。

このデモを参照してください：http：//jsfiddle.net/jackwanders/DEn6r/3/

また、負の左マージンを削除したい場合は、このトリックを使用してdivを水平方向に中央揃えにすることができます。

#inside {
  position: absolute;
  width: 300px;
  height: 80%;
  top: 10%;
  left: 0;
  right: 0;  // set left and right to 0
  margin: 0 auto; // set left and right margins to auto
  background: white;
}
于 2012-06-27T18:14:32.040 に答える