0

ビューポート内で適切なサイズに制限しようとしているスクロールコンテンツを含むライトボックススタイルのdivがあります。また、このdivを水平方向の中央に配置する必要があります。これはすべてFx/Chrome/IE9で簡単です。

私の問題は、IE8が、コンテンツのサイズ設定に使用する絶対位置とmargin: 0 auto、ライトボックスを水平方向に中央揃えするために使用する規則を無視することです。

  1. なんで？
  2. 回避策の私のオプションは何ですか？

編集：親要素を設定することで中央揃えの問題は修正されますtext-align:centerが、中央揃えしたい要素がインラインではないため、なぜそれが機能するのかわかりません。まだ絶対的なポジショニングのものに固執しています。

HTML：

<div class="bg">
  <div class="a">
    <div class="aa">titlebar</div>
    <div class="b">
      <!-- many lines of content here -->
    </div>
  </div>
</div>

CSS：

body { overflow: hidden; height: 100%; margin: 0; padding: 0; }
/* IE8 needs ruleset above */

.bg {
 background: #333;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */
}

.a {
 background: #eee; border: 3px solid #000;
  height: 80%; max-height: 800px; min-height: 200px;
  margin: 0 auto; 
  position: relative;
  width: 80%; min-width: 200px; max-width: 800px;
}

.aa { 
  background: lightblue;
  height: 28px; line-height: 28px; 
  text-align: center;
}

.b { 
  background: coral;
  overflow: auto;
  padding: 20px;
  position: absolute;
  top: 30px; right: 0; bottom: 0; left: 0;
}

問題のデモは次のとおりです：http：//jsbin.com/urikoj/1/edit

4

4 に答える 4

3

私は何が起こっているかを知りました.Doctypeでも、変更が必要なコードでもありません。

jsbinの編集ページが IE8 をサポートしていないということです。完全に表示された同じデモ* が IE8 で正しくスタイル設定されています。

編集モードでは、IE8 ブラウザ モードと IE8 ドキュメント標準を使用して IE9 で表示すると、jsbin は quirks モードまたはそのような奇妙なものを適用するようです。驚いたことに、このデモは IE7 ブラウザー モードとドキュメント標準 (quirks モード オフ) でも動作します。

<html>*リンクは後のリビジョンに移動しますが、唯一の変更はタグからすべての属性を削除することでした.テストのためにこれらを追加しました. したがって、デモはこれらの属性がなくても、html5 doctype を使用しても問題ありません。

于 2012-11-11T02:59:48.747 に答える
0

私はかつてこの問題を次のように修正しました：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">
于 2012-11-10T22:11:44.423 に答える
-1

The problem with the vertical aling in IE<9 should be solved with this:

.bg {
  text-align: center;
}

.a {
  text-align: left;
}

But I don't know what's going wrong with the absolute position

于 2012-11-10T22:55:33.757 に答える