css - 絶対配置の親と float:right の子が伸びる

Question

IE6、IE7、および FF2 では、.outer下の div がドキュメントの右端まで伸びています。完全なテストケースは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
  .outer { position:absolute; border:1px solid red; }
  .outer .floater { float:right; }
  </style>
</head>
<body>
  <div class="outer">
      <div class="floater">Lorem ipsum</div>
  </div>
</body>

私が理解しているようposition:absoluteに、外側の div はドキュメントの流れから削除する必要があり、(幅を指定せずに)そのコンテンツを表示するために必要な最小限のスペースを占有する必要があります。ただしfloat:right、どの子でもこれを破ります。

予想される出力 (IE8、FF3+、Chrome 2+、Safari 4、Opera 9+):

期待される出力 - IE8、FF3+、Chrome 2+、Safari 4、Opera 9+

実際の出力 (IE6、IE7、FF2):

実際の出力 - IE6、IE7、FF2

外側のdivが伸びないようにするにはどうすればよいですか? これは、IE6、IE7、および Firefox 2 でのみ発生します。

要件：

.outerセットを持つことはできませんwidth(そのままにしておく必要があります"auto")
.outer絶対的な位置に留まらなければならない
.floater右にフロートしたままにする必要があります

更新：

jQueryダイアログを使用して、「実際の」例として動作を再現しました。特性は同じです。

絶対位置の div があります (つまり、ダイアログコンテナー、jQuery-UI がこれを作成します)。
1) の div にはwidth="auto"
このダイアログ内には、右にフロートする要素があります。

こちらを参照してください。ここでも、IE6、IE7、および FF2 だけが問題のあるブラウザーです。

これにより、アプリケーション内の条件が複製されます。私はこのアップデートの上に表示されているように問題を煮詰めてみましたが、私の要件が理にかなっている現実世界の例を人々が使用できると感じています. 私はこれをやったと思います。

score 2 · Accepted Answer

否定的な回答で申し訳ありませんが、これを回避する方法はないと思います。これらの古いブラウザーの CSS 実装は、あなたが概説したケースに関しては単に正しくありません。あなたが私たちに与えた制約内で他の CSS プロパティを介してこれをハックする方法はないと思います. 限定的な修正として、理論的max-widthには外側の div に a を設定して、それが伸びる程度を制限することができます...しかし、残念ながらmax-width、言及されている「古い」ブラウザーのすべてでサポートされているわけではありません。

あなたが聞きたがっていることではないことはわかっていますが、私はあなたが弾丸を噛んでマークアップを変更するか、スタイル要件を緩和する必要があると思います (フロートをあきらめるなど)。

score 0 · Accepted Answer

.outer div が空であるため、異なる結果が得られます。コンテンツを追加するとすぐに、少なくとも私のテストではまったく同じように動作するようです (私のテストでは、「意図したとおりに動作する」として Chrome 3.0、壊れたものとして IE7 でした)。


<div class="outer">
  <div class="floater">Lorem ipsum</div>
Lorem ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit 
</div>

.outer div にはコンテンツがあると述べたので、そこから float div を削除してみてください。それでも非常によく似た出力が得られます。

編集

ストレッチせずにコードを再現するには (マージン/パディング/垂直ストレッチなど、これを同等に機能させた後に対処する必要があるさまざまな問題があることをここで理解してください)、相対的な「ラッパー」を導入できます。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>

  body { margin: 0; }
  #outer { position: absolute; border:1px solid red; }
  #wrapper { position: relative; }
  #floater { position: absolute; right:0; border: 1px blue solid;  }

  </style>
</head>
<body>

  <div id="outer">

    <div id="wrapper"> 
        <div id="floater">Lorem ipsumX</div> 
    </div>

    Lorem ipsum dolor sit amet consequetur elitipsum dolor sit amet consequetur elit
  </div>
</body>

score 0 · Accepted Answer

テストする IE6、IE7、または FF2 を持っていないので、これについて暗闇で突き刺すつもりです。私の記憶が私に役立つなら、あなたはしたいと思うでしょfloat:leftう.outer. これにより、インナーのプロポーション.outerを維持しながら幅を最小限に抑えることができます。div

score 0 · Accepted Answer

ページの端からはみ出さないようにするには、次のようにする必要があります。

body {margin:0;padding:0}

ただし、それでもページの幅全体を占めますが、オーバーフローすることはありません

score 0 · Accepted Answer

あなたの作業例ではjqueryを使用しているので、最初にコンテナーの幅を計算してから、フローターを次のようにフローティングすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  <style>
  .outer { position:absolute; border:1px solid red;}
  </style>
</head>
<body>
  <div class="outer">
    <div class="floater">Lorem ipsum</div>
  </div>

  <script type="text/javascript">
    $(".outer")
      .css("width", $(".outer").width());
    $(".floater")
      .css("float", "right");
  </script>

</body>

外側の div に幅を設定すると、他のすべてのブラウザーで動作します

score 0 · Accepted Answer

この場合、float には幅が必要であり、別の観点からは、top:0;left:0; が必要です。配置された要素の場合、このように保持するべきではありません。注: これは設計のためのロジックであり、コードを理解できない場合は質問してください :)

score 0 · Accepted Answer

.outer {オーバーフロー:非表示; クリア:右; 位置:絶対; 境界線: 1px 単色の赤; } .outer .floater { float:right; } } Lorem ipsum 非常に簡単です。フロートされた子を持つすべてのオブジェクトにオーバーフロープロパティとクリアプロパティを設定するだけです。

親もフロートされている場合は、オブジェクトをフロートに設定するだけで済みます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
  .outer { overflow:hidden; clear:right; position:absolute; border:1px solid red; }
  .outer .floater { float:right; }
  .outer .floater .child { float:right; }
  </style>
</head>
<body>
  <div class="outer">
      <div class="floater">Lorem ipsum 
                <span class="child">HI!</span>
      </div>
  </div>
</body>

ご不明な点がございましたら、お気軽にお問い合わせください。

よろしく & GL. ;)

score 0 · Accepted Answer

に変更float:rightするとclear:right、例で要求された出力が得られますが、実際にフローター div の外側にコンテンツがある場合、期待どおりに機能しません。

score 0 · Accepted Answer

ええ、絶対配置要素の場合、幅は未定義です（topおよびleftと同様）。この場合、テーブルスタイルの幅を伸縮自在にするブラウザーもあれば、幅を 100% にするブラウザーもありますが、それはブラウザー次第です。この場合、明示するのが最善です。

表は、クロスブラウザー方式で柔軟な幅を取得するための唯一の良い方法です。単一セルのテーブルは、cellspacing=0.

<table cellspacing=0 cellpadding=0 style="position:absolute;top:0;right:0">
    <tr><td>Lorem ipsum</td></tr>
</table>

css - 絶対配置の親と float:right の子が伸びる

10 に答える 10

Related

Reference