313

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

を使用すればpixel width動作します。親が比較的配置されている場合、子のパーセンテージ幅が機能します。

  1. ここに欠けているものはありますか？
  2. pixel-based width子供以外にこれを簡単に修正することはできますか？
  3. これをカバーするCSS仕様の領域はありますか？
4

7 に答える 7

155

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

于 2008-08-01T12:22:51.593 に答える
64

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

于 2008-08-05T05:54:23.310 に答える
41

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

多くの実用的な例とともにこれについてより詳細な議論が必要な場合は、ここをざっと見てください。

于 2008-09-04T09:02:42.533 に答える
39

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

InternetExplorerだからです。

ここに欠けているものはありますか？

つまり、IEが良くないという同僚やクライアントの意識を高めることです。

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

単位は、フォントサイズだけでなく、パディングや余白にも使用emできるため、流動的なレイアウトを作成するときに便利です。したがって、サイズが変更された場合、空白はテキストに比例して拡大および縮小します（これは本当に必要なものです）。パーセンテージがemsよりも細かい制御を与えるとは思いません。100分の1em（0.01 em）で指定するのを止めるものは何もありません。ブラウザは、適切と思われるように解釈します。

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

私が覚えている限り、CSS1.0emではフォントサイズのみを対象としたものでした。

于 2009-05-13T07:47:40.617 に答える
34

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

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

于 2010-10-22T16:21:10.660 に答える
4

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

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
于 2018-09-07T14:53:02.030 に答える
3

親<div>タグに幅が指定されていません。子<div>タグに使用します。パーセンテージまたはピクセルにすることができますが、それが何であれ、適切な位置にリンクする必要があります。

<div id="MainDiv" style="width:60%;">
    <div id="Div1">
        ...
    </div>
    <div id="Div2">
        ...
    </div>
    ...
</div>
于 2020-10-06T03:46:15.157 に答える