17

次のHTMLが与えられます。2つの列が表示されます：#left、#right。どちらも固定幅で、1pxの境界線があります。幅と境界線は、上部コンテナのサイズと同じです#wrap。

Ctrl +-を押してFirefox3.5.2をズームアウトすると、列が折り返されます（デモ）。

これを防ぐ方法は？

<!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>
4

9 に答える 9

13

次のように、別のボックス モデルに切り替えてみてください。

#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-13T21:20:29.863 に答える
8

ドミトリ、

ブラウザがズーム後に div の新しい幅を計算するとき、2 つの 478px+4px の境界要素を 1 つの 960px に比例して縮小することはありません。したがって、次のようになります。

オリジナルのスタイル:

#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 から幅を削除します。浮いているので、中身に合わせて沈みます。ただし、浮動要素に幅を適用する必要があり、div {float:left} はそれを #wrap に適用します。

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

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

#wrap を中央に配置したい場合は、再度幅を宣言し、margin:0 auto; を追加する必要があります。その場合、この問題が再び発生します[編集: または、クリスが示したように、幅を 100% に設定します]。したがって、#left、#right の幅を再計算して、それらが収まるようにします。

とにかく、この種の問題を回避するには、親要素と子要素の幅の間に少し余裕を持たせることが良いと理解しています。

于 2009-08-13T21:13:15.230 に答える
2

上記と同じ問題が発生しました。その後、どうしようもなくインターネットを数分間さまよったところ、 どうやら と のバグであることがわかりまし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 ) を参照してください。 -ボーダー/ )

于 2010-03-25T12:20:45.500 に答える
2

同様の問題がありました。#right を負のマージンに設定するとうまくいきました。例えば：

#right{
    margin-right:-400px;
}
于 2011-03-23T12:32:48.100 に答える
1

私はあなたの状況を完全に理解しているかどうかわかりません。ズームを小さくすると、事実上ズームアウトするはずです。ズームアウトすると、列が折り返されると言っていますか？

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

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

これが機能しない場合は、ブラウザの小さな不一致を補正するために幅を調整して、列の間に小さなスペースを残してみてください。

編集済み（上記は無視してください）：

あなたが私にもっと多くの情報を提供してくれたのを見て、私はあなたにブラウザがサイズ変更するときに丸めを組み込んでいることをあなたに言う必要があります、そしてこれらの正確なピクセルパーフェクトなサイズ設定は最も賢いことではありません。

代わりに、次のように、一方のdivに絶対幅を設定し、もう一方のdivに自動幅を設定することができます。

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

これにより、ブラウザは#wrapdiv内で可能な限り多くのスペースを#rightに使用できるようになります。必ず折り返しの幅を設定してください。そうしないと、ウィンドウの100％が使用されます。

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

編集済み：

コンテナの幅をすでに定義しているため、右は固定幅に非常に近いので、コンテナの幅から左側の幅を引いたものになります。これは、ウィンドウのサイズを変更するときに不一致がないことを確認するためだけのものです。

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

私が助けてくれたことを願っています。

于 2009-08-13T19:44:48.080 に答える
1

高さを固定した div がある場合、ズームがすべてを分割しないようにするoverflow:hiddenには、その css に追加します。それは私にとってはうまくいき、今ではすべてのブラウザがズーム狂うことができます. :)

于 2011-12-15T20:01:01.977 に答える
1

私もこのバグと格闘していました。各タブに固定幅のタブ ナビゲーションがあり、右マージンはすべてコンテナー div の幅の合計です。

私は実際に新しい解決策を発見しました。これはうまく機能しているようです。タブ ナビゲーションは、もちろん ul タグでラップされています。この ul タグの幅を、コンテナーの div よりも約 6 ピクセル大きく設定しました。たとえば、コンテナ div の幅は 952px で、ul タグの幅は 958px です。ナビゲーションの li タグは左にフロートされ、幅が固定されているため、952px を超えることはありませんが、ul 要素には多少の余裕があり、このバグをつぶすために必要なようです。Firefox と IE7/8 でズームアウトしようとしましたが、タブはそのままです。

これが誰かが数分/時間を節約するのに役立つことを願っています!

于 2010-11-24T03:36:48.443 に答える
0

すべてのケースでフローティング バグを修正するための最善の解決策は、tds を使用したテーブル レイアウトを使用することです。浮いても緩むことはありません。

于 2014-05-28T10:13:23.570 に答える
0

問題は #wrap の幅が原因です。

幅を 100% に設定しましたが、Firefox で CTRL - でズームアウトしても壊れなくなりました。

于 2009-08-13T21:09:55.347 に答える