Firefoxのズームを縮小したときのフローティングレイアウトのラッピングを防止する方法

次のHTMLを指定します。 2つの列：#left,#rightを表示します。両方とも固定幅で、1pxの境界線を持っています。幅と罫線は上部コンテナのサイズと同じです：#wrap。Firefoxのズームを縮小したときのフローティングレイアウトのラッピングを防止する方法

Ctrl +キーを押してFirefox 3.5.2を縮小すると、列が折り返されます（demo）。

これを防止するにはどうすればよいですか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test</title> 
    <style type="text/css"> 
     div   {float:left} 
     #wrap   {width:960px} 
     #left, #right {width:478px;border:1px solid} 
    </style> 
    </head> 
    <body> 
    <div id="wrap"> 
     <div id="left"> 
     left 
     </div> 
     <div id="right"> 
     right 
     </div> 
    </div> 
    </body> 
</html>

出典

2009-08-13 Dmitri Zhuchkov

私はあなたの状況を十分に理解していません。ズームを縮小すると、実際にズームアウトする必要があります。あなたは列をラップアラウンドするときにズームアウトすると言っていますか？

あなたのCSSでこのコードを使用して、それらのdivをフロートする必要があります

#container {width: 960px} 
#left {float: left} 
#right {float: right}

これが動作しない場合は、いくつかの小さなブラウザの不一致を補償するための幅を調整することによって、列の間の小さなスペースを残して試すことができます。

EDITED（上無視する）：あなたはより多くの情報を私に提供してきたよう

を見て、私はこれらの正確なピクセル完璧なサイズをリサイズして持つことはないときにブラウザが丸め組み込んだことを伝える必要があります最もスマートなことです。

代わりに、あなたは1つがそうのような自動幅を有するように絶対的な幅やその他を持つDIV持つことができます。

#container {width: 960px;} 
#left {width: 478px;} 
#right {width: auto;}

は、これはおそらく撮影することができますよう、ブラウザが#right用として多くのスペースを取る必要があります#wrap div内にあります。ラップの幅は必ず設定してください。そうでない場合は、ウィンドウの100％がかかります。

こちらがお役に立てば幸いです。

EDITED：あなたはすでにあなたのコンテナの幅を定義しているため

右は、あなたの固定幅に非常に近いので、それは単に、左サイドの幅を差し引いたコンテナの幅です。これは、ウィンドウのサイズを変更するときに矛盾がないことを保証することに過ぎません。

私はそれがスペースの全領域を占めることはないと理解しますが、コンテンツが追加されると、コンテナの左の幅が最大になります。あなたは背景を適用しようとしていますか？その場合は、コンテナの背景として右側の背景を設定し、左側の背景として左側を設定します（半分を覆っていることを確認してください）。

私は助けてくれることを願っています。

出典

2009-08-13 19:44:48

デモで私の質問を延長しました。左右のフロートは助けになりません。列の幅を小さくすると役立ちますが、使用できるオプションは1つだけですか？ –

上記の私の例を更新しました。 –

#right {width：auto;}は折り返しに役立ちますが、これは#right固定幅にはなりません。 #rightに十分なコンテンツがない場合は、478pxより小さくなります。 –

問題は＃折り返しの幅に起因します。

私は、幅を100％に設定しました。それは、Firefoxではズームアウト時にCTRL - で破られません。

出典

2009-08-13 21:09:55 ChrisBenyamin

はい、960gsグリッドシステムを使用するなどの理由で幅を960pxに設定する場合や、コンテンツを中央に配置したい場合は、コンテナの幅を設定する必要があります。 –

ドミトリ、

ブラウザを使用すると、ズームした後、あなたのdivの新しい幅をcaluclates

が、それは、単一の960ピクセル幅に比例して境界要素の2 478px + 4PXを減らすことはありません。

あなたのオリジナルのスタイル：：だから、これで終わる

#wrap equals 960px wide 
#left & #right, plus border equals 960px wide

すべてがうまく収まります。

拡大縮小（CTRL-）

#wrap equals (approx.) 872px wide. 
#left, #right, plus border eqauls 876px wide. 
(left and right reduce to approx 436px each, plus 4 px of border)

内容は#wrapのためにあまりにも広いです。 &を見るには、#wrapに背景色を適用するだけです。

修正するには、＃wrapから幅を削除します。それは浮遊しているので、内容に合わせて震えます。しかし、float要素に幅を適用する必要があり、div {float：left}はそれを#wrapに適用します。

div {float：left}スタイルを削除し、float：leftを#left、#rightに追加します。

#left, #right {float:left;width:478px;border:1px solid}

あなたは#wrapを中心にしたいなら、あなたは再びそれのために幅を宣言し、マージンを追加する必要があります：あなたは再びこの問題が発生することがあります。その場合には0オート;, [編集：またはあなたは、chrisが示すように、幅を100％に設定できます]。だから#left、#rightの幅を再計算して、それらが収まるようにします。

とにかくこの種の問題を回避するには、親要素と子要素の幅の間に小さな呼吸室を残しておくとよいと私は理解しています。

出典

2009-08-13 21:13:15

は、次のように異なるbox modelに切り替えてみてください：

#left, #right 
{ 
    width:480px; 
    border:1px solid; 
    box-sizing: border-box; 

    /* and for older/other browsers: */ 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box 
}

出典

2009-08-13 21:20:29

これは私の問題を解決しました。私はコンパスのミックスインを使用しました：http://compass-style.org/reference/compass/css3/box_sizing/ – jedmao

なぜ誰が起こるのか説明できますか？私は自分のサイト[Goodwill Fire 18]（http://www.goodwillfire18.com/）で同じ問題を抱えていました。「ニュースフィード」と右側のサイドバーの両方が左右に浮いています。右側のサイドバーには、OPと同様の境界線があります。 Firefoxでズームアウトすると、右サイドバーが下に表示されます。 – Kayla

私は上記と同じ問題に遭遇しました。数分間インターネットを絶望的に徘徊した後、私は明らかにそれがFirefox 3.5.xとIE 7/8のバグであることが分かった。バグはこの執筆時点ではまだ存在しています。 http://markasunread.com/?p=61（旧http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-by-border/）

出典

2010-03-25 12:20:45 detj

まだFirefox 29.0.1にバグがあります – Kayla

私もこのバグと格闘したバグの詳細については、こちらを参照してください確認するに

。私は各タブの固定幅と右余白のコンテナdivの幅を合計したタブナビゲーションを持っていました。

私は実際には素晴らしいソリューションと思われる新しいソリューションを発見しました。もちろん、タブナビゲーションはulタグで囲まれています。このulタグの幅をコンテナdivよりも約6px大きく設定しました。例えば、コンテナdivの幅は952px、ulタグの幅は958pxです。ナビゲーション内のliタグは左に浮かび、幅は固定されているので、952pxを超えませんが、ul要素には何らかの呼吸スペースがあり、このバグを解消するために必要です。 FirefoxとIE7/8でズームアウトしようとしましたが、タブはそのまま残ります。

希望すると、誰かが数分/時間を節約できるようになります。

出典

2010-11-24 03:36:48 dfw

同様の問題がありました。 #rightを負のマージンに設定しています。たとえば：あなたはすべてを壊すからズームを防ぐために、一定の高さのdivを、持っている

#right{ 
    margin-right:-400px; 
}

出典

2011-03-23 12:32:48 stiopa

[OK]をみんなは、それのCSSにoverflow:hiddenを追加します。それは私のためのトリックでしたし、すべてのブラウザがズームクレイジー行くことができます。:)

出典

2011-12-15 20:01:01

すべてのケースでフローティングバグを修正するためのベストソリューションは、tdsを使用するテーブルレイアウトです。それは決して浮いてしまうことはありません。

出典

2014-05-28 10:13:23

Firefoxのズームを縮小したときのフローティングレイアウトのラッピングを防止する方法

答えて

関連する問題