273


11

Internet Explorer 7で絶対位置の親のパーセンテージ幅の子要素

私は絶対位置のdivに数人の子供を含んでいます。そのうちの1人は相対的に位置のあるdivです。 子のdivに*パーセンテージベースの幅*を使用すると、http://en.wikipedia.org/wiki/Internet_Explorer_7 [Internet Explorer 7]では幅が0に縮小されますが、FirefoxまたはSafariでは表示されません。 。

私は*ピクセル幅*を使用する場合、それは動作します。 親が相対的に配置されている場合は、子のパーセント幅が機能します。

  1. ここに足りないものはありますか。

  2. _ピクセルベースの幅_のほかにこれの簡単な修正はありますか 子?

  3. これをカバーするCSS仕様の領域はありますか?

6 Answer


139


親の div`は、ピクセルかパーセンテージのどちらかで、定義された width`を持つ必要があります。 Internet Explorer 7では、子パーセントのdivが正しく機能するためには、親のdivが定義されたwidthを必要とします。


57


これがサンプルコードです。 私はこれがあなたが探しているものだと思います。 以下はFirefox 3(mac)とIE7でまったく同じ表示です。

#absdiv {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 80%;
  height: 60%;
  background: #999;
}

#pctchild {
  width: 60%;
  height: 40%;
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}


37


8より前のIEは、ボックスモデルに対して時間的な側面があり、特にパーセンテージベースの幅で問題が発生します。 あなたの場合ここで絶対配置された `div`はデフォルトで幅を持たない。 その幅は、コンテンツのピクセル幅に基づいて計算され、コンテンツがレンダリングされた後に計算されます。 そのため、IEが相対的に配置された「div」に遭遇してレンダリングされる時点で、その親の幅は0であるため、それ自体0に折りたたまれています。

たくさんの実用的な例と一緒にこれについてもっと深く議論したいならば、http://www.positioniseverything.net/explorer/percentages.html [ここ]を手に入れてください。


34


_ IE7で絶対位置の親の子のパーセント幅が機能しないのはなぜですか? _

インターネットエクスプローダーだから

_ ここに足りないものはありますか。 _

つまり、同僚やクライアントのIEに対する意識を高めるためです。

_ 子のピクセルベースの幅以外に簡単な修正はありますか? _

フォントサイズだけでなくパディングやマージンのためにそれらを使用することができるのでそれらが液体レイアウトを作成するときより有用であるので `em`ユニットを使用してください。 そのため、テキストのサイズを変更すると、余白はテキストに比例して増減します(実際に必要なものです)。 パーセンテージがemsより細かい制御を与えるとは思わない。何百ものems(0.01 em)で指定するのを止めるものは何もありません。ブラウザは適切と判断して解釈します。

_ これをカバーするCSS仕様の領域はありますか? _

私が覚えている限りでは、em 1.0と%sはCSS 1.0のフォントサイズだけを対象としていました。


31


これは `hasLayout`プロパティが古いブラウザに実装されている方法と関係があると思います。

あなたもIE8であなたのコードを試してみましたか? IE8にはデバッガー([.kbd]#F12#)があり、IE7モードでも実行できます。


1


`div`は定義された幅を持つ必要があります: