浮動小数点とオーバーフローを使ったFirefox予期しない改行

私は.buttonとテキストが内部にある.boxという2つの項目を保持するコンテナdivを持っています。 .buttonが最初に来て右に浮かびます。 .boxには浮動小数点がありません[これは制約です - 浮動小数点型に依存する他の類似の構造のために左に浮動させることはできません]。 .boxはoverflow: hidden;を持ち、新しいブロック書式設定コンテキストを確立します。これにより、.boxは、前回の浮動小数点の「100％まで」、.buttonに及ぶことができます。浮動小数点とオーバーフローを使ったFirefox予期しない改行

.outer-containerこれらのすべてが格納されていて、正しくフローティングされています。クロム（26.0.1410.12ベータ-MのPC、Macの25.0.1364.99）、サファリ（6.0.2マック）、及びIE8-9で

http://jsfiddle.net/6qAwA/5/

、これは所望のように作用します。 .boxのテキストは1行にとどまり、.outer-containerの右の浮動小数点のため、正確に必要なサイズになります。しかしFirefoxでは、テキストは別の行に分割されます。

.buttonが代わりに浮いているとき、私はまた、同様の問題を見つける左 - 私はFirefox用以外のすべてにおいて所望の動作を取得。

これはPC用のFirefox 16.0.1と19.0、Macの場合は18.0.1と19.0です。これはバグですか？

出典

2013-02-27 Chris

.boxにdisplay: inline-block;を追加します。

実際

Demo

出典

2013-02-27 01:32:32 Adrift

これは元のフィドルの目的のために正確に動作しますが、残念ながら、私は「アウターコンテナ」を少し柔軟にする必要があるので、私が探しているものではありません。 '.outer-container'がfloatされなかった場合、' .box'は 'overflow：hidden;'のために以前のfloat要素の100％までに及ぶはずですが、全体が100％になります。 [imgur]（http://i.imgur.com/MLtLMjp.png）、[インラインブロックのない新しいフィドル]（http://jsfiddle.net/6qAwA/11/） – Chris

1つの '.box'を持っている場合、私は真ん中で会い、より特定のセレクタを使って' display：inline-block; 'を追加することができます。 [新しいフィドル]（http://jsfiddle.net/6qAwA/16/）。しかし、まだ変わっています。この修正により、この問題がFFのバグのように見えることはわかりません。 – Chris

、あなたがあなたの希望の動作のための第二divを必要としない http://jsfiddle.net/Volker_E/x5rPd/ ようなソリューションのために行くされているとき。

出典

2013-02-27 02:16:17

これは元の問題にも意味がありますが、私が取り組んでいるプロジェクトの目的上、ブロックレベルの要素が必要です。 – Chris

フローティングノードもinline-blockにそのdisplayを設定した後にのみ、Firefoxで改行する場所私は今日、この問題に出くわし、その理由はコンテナノードがnowrapにwhite-spaceセットのスタイル設定を持っていたということでした。 コンテナノードのwhite-spaceの値をnormalにリセットすると、この問題が解決されました。

出典

2013-08-07 11:02:43

これは私のために働いた - コンテナ要素はボタンで、 'white-space：normal'に設定することで問題が解決されました。ありがとう！ –

作品。しかし、なぜ？特にnowrapが次の行に折り返してしまうのは狂っているようです。 –

あなたのコンテナに 'nowrap'が必要な場合は、この解決策を提案します：http://stackoverflow.com/a/26306907/2550529 – SepehrM

white-space: normal私のための秘訣はありませんでした。ダイレクトテキストコンテナにはwhite-space: nowrap;が機能しました。

出典

2014-07-30 12:20:53 montagproject

浮動小数点とオーバーフローを使ったFirefox予期しない改行

答えて

関連する問題