Internet Explorer 7で絶対配置された親の子要素の幅の割合

私はdivいくつかの子供たちを含む絶対配置されていますが、そのうちの1つは比較的配置されていdivます。percentage-based width子divでaを使用すると、0 widthIE7では折りたたまれますが、FirefoxまたはSafariでは折りたたまれません。

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

1. ここで見逃しているものはありますか？
2. pixel-based width子供のほかに簡単な修正はありますか？
3. これをカバーするCSS仕様の領域はありますか？

親divはwidth、ピクセル単位またはパーセンテージのいずれかでを定義する必要があります。Internet Explorer 7では、親divが正しく機能するにはwidth、子の定義済みのパーセンテージが必要divです。

これがサンプルコードです。これはあなたが探しているものだと思います。以下は、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;
}

<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

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

これについてより多くの実用的な例とともに詳細な説明が必要な場合は、ここで少し調べてください。

IE7で絶対配置された親の子のパーセント幅が機能しないのはなぜですか？

Internet Explorerだから

ここで見逃しているものはありますか？

つまり、同僚の/クライアントのIEが下手だという認識を高めることです。

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

emユニットを使用して、液体レイアウトを作成するときに、パディング、マージン、フォントサイズに使用できるため、より便利です。したがって、テキストのサイズを変更すると、テキストに比例してホワイトスペースが拡大および縮小します（これは実際に必要なものです）。パーセンテージでemsよりも細かく制御できるとは思いません。100分の1エム（0.01エム）で指定するのを止めるものは何もありません。ブラウザは適切と解釈します。

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

覚えていない限り、em's and％' sはCSS 1.0のフォントサイズのみを対象としていました。

これはhasLayout、古いブラウザでのプロパティの実装方法に関係していると思います。

IE8でコードを試し、そこでも動作するかどうか確認しましたか？IE8にはデバッガ（F12）があり、IE7モードでも実行できます。

div定義された幅を持っている必要があります：

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>