Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。 -- html フィールド と css フィールド と internet-explorer-7 フィールド 関連 問題

Why did the width collapse in the percentage width child element in an absolutely positioned parent on Internet Explorer 7?












303
vote

問題

日本語

私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。

Form3 を使用している場合は機能します。親が比較的配置されている場合は、子の幅の割合が機能します。

  1. ここにいないものはありますか?
  2. <コード> Form4 以外にも簡単な修正があります。 子供?
  3. これを網羅するCSS仕様の面積はありますか?
英語

I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based width on the child div, it collapses to 0 width on IE7, but not on Firefox or Safari.

If I use pixel width, it works. If the parent is relatively positioned, the percentage width on the child works.

  1. Is there something I'm missing here?
  2. Is there an easy fix for this besides the pixel-based width on the child?
  3. Is there an area of the CSS specification that covers this?
</div
        

回答リスト

151
 
vote
vote
ベストアンサー
 

親<コード> this.Opacity = trackBar1.Value / 5000.0; 8 は、画面で、またはパーセントとして定義された this.Opacity = trackBar1.Value / 5000.0; 9 を持つ必要があります。 Internet Explorer 7では、親<コード> this.Opacity = trackBar1.Value / 5000d; 0 は、保存された 998877631 が正しく機能するために定義された<コード> this.Opacity = trackBar1.Value / 5000d; 1 を必要とします。

 

The parent div needs to have a defined width, either in pixels or as a percentage. In Internet Explorer 7, the parent div needs a defined width for child percentage divs to work correctly.

</div
 
 
63
 
vote

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

Here is a sample code. I think this is what you are looking for. The following code displays exactly the same in Firefox 3 (mac) and 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>
</div
 
 
40
 
vote

IE 8より前の前に、最も注目すべき幅の幅に問題を生じさせるそのボックスモデルに時間的な側面を持っています。ここでの場合、絶対に配置された<コード> div はデフォルトでは幅はありません。その幅はその内容のピクセル幅に基づいて取り上げられ、内容がレンダリングされた後に計算されます。そのため、Appenters&Scoseの div の幅は0です。したがって、それ自体が0に折りたたまれます。

これについてのより詳細な議論を望む場合は、多くの働く例と共に、ガンダーこちら

 

IE prior to 8 has a temporal aspect to its box model that most notably creates a problem with percentage-based widths. In your case here an absolutely positioned div by default has no width. Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point, IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.

If you would like a more in-depth discussion of this along with lots of working examples, have a gander here.

</div
 
 
37
 
vote

パーセンテージ幅の子供がいないのはなぜですか 絶対に親作に配置されています IE7

Internet Explorerなぜなら。

ここにいないものはありますか?

それは、あなたの共同労働者の/クライアントの意識を高めているという意識を高めています。

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

em ユニットは、パディングやマージンやフォントサイズに使用できますので、液体レイアウトを作成するときに便利です。それであなたの白いスペースが大きくなり、サイズ変更されている場合はあなたのテキストに比例して縮小します(これは本当に必要なものです)。パーセントがEMSよりも細かいコントロールを与えるとは思わない。 100分のEMS(0.01 EM)で指定するのをやめることは何もありません(0.01 em)、ブラウザはそれが合うように見えるように解釈されます。

これを網羅するCSS仕様の面積はありますか?

em のののSSと%Sを覚えている限り、CSS 1.0でのフォントサイズを対象としていません。

 

Why doesn’t the percentage width child in absolutely positioned parent work in IE7?

Because it's Internet Explorer.

Is there something I'm missing here?

That is, to raise your co-workers' / clients' awareness that IE is not good.

Is there an easy fix besides the pixel-based width on the child?

Use em units as they are more useful when creating liquid layouts as you can use them for padding and margins as well as font sizes. So your white space grows and shrinks proportionally to your text if it is resized (which is really what you need). I don't think percentages give a finer control than ems; there's nothing to stop you specifying in hundredths of ems (0.01 em) and the browser will interpret as it sees fit.

Is there an area of the CSS specification that covers this?

None, as far as I remember em's and %'s were intended for font sizes alone back at CSS 1.0.

</div
 
 
34
 
vote

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

IE8でコードを試してみましたか。 IE8にはデバッガ( f12 )があり、IE7モードでも実行できます。

 

I think this has something to do with the way the hasLayout property is implemented in the older browser.

Have you tried your code in IE8 to see if works in there, too? IE8 has a Debugger (F12) and can also run in IE7 mode.

</div
 
 
3
 
vote

<コード> div は定義された幅を持つ必要があります。

<事前> <コード> <div id="parent" style="width:230px;"> <div id="child1"></div> <div id="child2"></div> </div>
 

The div needs to have a defined width:

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

<div> タグには、幅が指定されていません。子<コード> <div id="absdiv"> <div id="reldiv"></div> <div id="pctchild"></div> </div>0 タグに使用すると、パーセンテージまたはピクセルになる可能性がありますが、それがあるものは何でも、適切な位置にリンクする必要があります。

<事前> <コード> <div id="absdiv"> <div id="reldiv"></div> <div id="pctchild"></div> </div>1
 

The parent <div> tag doesn't have any width specified. Use it for the child <div> tags, it could be percentage or pixel, but whatever it would be,it should link to its appropriate positions:

<div id="MainDiv" style="width:60%;">     <div id="Div1">         ...     </div>     <div id="Div2">         ...     </div>     ... </div> 
</div
 
 

関連する質問

0  jQuery GalleriaとIE7の問題  ( Problems with jquery galleria and ie7 ) 
次にやるべきことを理解することができないという問題があります。私はHTMLページでjQuery Galleeriaを使用しているウェブサイトを持っています。ページ上部にある10枚の写真の自動再生スクロール。古典的なテーマを使用しており、非常に基本的な機能です。...

3  PAGEがフレームセットの一部であり、垂直方向にサイズ変更されている場合、Body OnResizeイベントはIE7で起動しません。  ( Body onresize event does not fire in ie7 when page is part of a frameset and res ) 
私は2つのフレームを垂直に持つ単純なフレームセット、すなわち2行: 最初の行には固定ヘッダが含まれています。 2行には上部に固定ツールバーが含まれており、サイズ変更可能な位置は下部にあります。 ブラウザ間の違いをレンダリングすることで、「コンテンツ」フレーム...

0  ブロックレベルのアンカーテキストの周りのスペースを取り上げない[IE7]  ( Block level anchor not taking up space around text ie7 ) 
私はいくつかの簡単なCSSを持つアンカータグを持っています: <事前> <コード> div { background-color: gray; /* for debugging */ } div a { display: block; paddi...

1  IE7の不要な水平スクロールバー  ( Unwanted horizontal scroll bar in ie7 ) 
私は IE7を除いて大規模な水平スクロールバーがあります。 HTMLコード全体とCSSコード全体を貼り付ける必要があるので、ページソースを参照します。 サイトを見ることができます あらゆる援助は大いに感謝されるでしょう。 ありがとう。 ...

0  IE7 CSSホーバーの問題  ( Ie7 css hover issue ) 
2つのメニュー、水平ドロップダウンと垂直メニューを作成しました。これらの両方がIE8、Chrome、Firefoxでうまく機能しますが、IE7で奇妙な問題が発生しています。 ここでJSFIDDLEを見ることができます: http://jsfiddle.net...

13  スクロールバーがコンテンツの重なり合うのを防ぐ方法  ( How to prevent scrollbars from overlapping the content ) 
私は水平方向にオーバーフローするプリフォーマットのコード( <事前> <コード> overflow: auto; しかし、IE7(他のIEバージョン)では、スクロールバーは私のコンテンツの最後の行と重なっています(これは特に1行のコンテンツがあるときに刺激...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

1  浮遊すぎる  ( Floating too far right ) 
1つの画面上のマスターレコードを表示するレコード管理WebアプリケーションとAjaxesはエディタのDIVに動的に構築されたエディタを作成しました。それはうまくいきます。 DIVがウィンドウではないが、それがそれをもう少し行動させるのはいい考えだかもしれな...

0  IE7浮遊ULのリストスタイルを殺す  ( Ie7 killing list style on floated uls ) 
私は2つのUL(.listoneと.listtwoが尊敬しています)浮上し、その他の権利を持っています。リストスタイル:サークル; IE7 =&LTを除くすべてのブラウザで機能します。 。 IE7ではリストスタイルは無視されます。どうすればいいですか? ...

7  IE7 / 8のコルシャンは尊敬されていません  ( Colspan in ie7 8 not respected ) 
DOMは次のようになります。 <事前> <コード> <table> <tr> <td>a</td>...<td>g</td> </tr> <tr> <td colspan="3"> <table> .....




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有