5

SafariとChrome/Firefoxのレイアウトレンダリングの違いに出くわしましたが、どちらが「正しい」かわかりません。

ここでjsfiddleを確認できます

Firefox / Chromeでは、レイアウトは期待どおりであり、黄色のdivは赤いdivの直後にあります。ただし、Safariでは、黄色のdivは赤いdivの下に配置されます。

私が間違ったことを調査した後、バグはE、プロパティmargin-right（値：-11px）がwidth私のdivのプロパティ（値：10px）よりも大きいCSSクラスに起因することがわかりました。

Safariがこのようにレンダリングする理由を理解していると思います。クラスのdivのB幅は、プロパティを持つ子の幅の合計として計算されますfloat: left;。

ここではwidthB = widthB2*2 + widthE + marginRightE + widthC、marginRightE < -widthEwidthBは、各divを隣り合わせに含めるのに十分な大きさではありません。

だから私の質問は：

  1. 私はSafariが何をするのかを理解していますか？
  2. ChromeとFirefoxのレンダリングが異なるのはなぜですか？負の値に基づいて親divの幅を減らしていないだけmargin-rightですか？
  3. margin-rightこの場合、常にdivの幅以下になるように適切に修正しますか？

ありがとうございました！

HTML：

<div class="A">
  <div class="C">
    <div class="B">
      <div class="B2"></div>
      <div class="B2"></div>
      <div class="E"></div>
      <div class="C">
        <div class="D"></div>
      </div>
    </div>
  </div>
</div>

CSS：

.A {
  background-color: blue;
  height: 200px;
}

.B {
  height:100px;
}
.B2 {
  background-color: red;
  height: 100px;
  width: 100px;
  float: left;
}
.C {
  float: left;
}
.D {
  height: 40px;
  width: 40px;
  float:left;
  background-color: yellow;
}
.E {
  height: 50px;
  width: 10px;
  position: relative;
  left: -10px;
  margin-right: -11px;
  background-color: black;
  float: left;
}
4

5 に答える 5

2

JS フィドルの CSS で何が起こるかわかりません。あなたは未定義の動作を掘り下げています。私がこれを言うのは：

  • 「C」はフローティングですが、幅が定義されていません。これにより、レイアウトの複雑さに応じて、さまざまなブラウザーで問題が発生します。

  • 浮動要素はどれもクリアされません。clear:bothフローティングの場合、それが であるかどうかなど、いくつかの説明の clearfix を使用することが不可欠です。

マークアップを微調整して明確な修正を追加すると、コンテンツが常に239px. http://jsfiddle.net/eaFn9/を参照

ただし、相対的に配置されたアイテム「E」とマージンが幅の計算に悪影響を及ぼしているようです。これは、Chrome の Web インスペクターがこの要素の負のマージンについて常に奇妙に報告しているように見えるためです。

Web インスペクターでこれをいじってみると、マイナスのマージンがドロップの原因であるかのように見えることがわかります。幅がなく、相対的な位置ではないコンテナが原因である可能性があると思います。

直し方？

個人的には、レイアウトを書き直して、すべてのフロートに固定幅を含め、フロートのネストを減らし、可能な場合はクリアしたいと思います。複雑すぎるように見えますが、実際の使用例がなければ、書き直すのは困難です。

ただし、「B2」+「E」要素をフローティングして相対的に配置されたラッパーでラップし、「E」で絶対配置を使用して同じ効果を与え、負のマージンを削除できるように思えました。

これは私が思いついた JSFiddle です: http://jsfiddle.net/jV3Ub/

于 2013-01-22T22:54:07.343 に答える
1

申し訳ありませんが、これは実際には答えではありませんが、コメントするには長すぎます...とにかく、これを理解するのに1分かかりました.

Mac OS X 10.8.2、Chrome 24.0 (Mac)、および Safari 6.0.2 (Mac も) で Firefox 19 を使用しました。Web インスペクタ ツールを使用して、実際には div が同じ方法で計算されていないことに気付きました。私は計算が苦手ですが、時間をかけてじっくりと調べてみたところ、Safari の計算はあなたと同じように理解できました。

Safari では、div B は黄色の div (C) を含めるのに十分な幅がないように見えるため、下部に拒否されているようです。記録として、私のテストでは、FF と Chrome では赤い div の右側に黄色い div が表示されますが、Safari では赤い div のすぐ下と左上に表示されます。これが役立つかどうかはわかりませんが、最新のすべてのブラウザーに統合された Web インスペクター ツールを使用してこれをデバッグすることをお勧めします。

なぜこれが起こるのかはわかりませんが、私が知っているのは、次のように E の幅を 1px だけ変更することだけです:

.E {
  height: 50px;
  width: 11px; /* added 1px to this property */
  position: relative;
  left: -10px;
  margin-right: -11px;
  background-color: black;
  float: left;
}

Safari では正しく表示されます。

于 2013-01-19T00:50:32.217 に答える
1

2番目の編集:

これら 2 つの質問をリンクする必要があると思います: https://stackoverflow.com/questions/4989930/css-negative-marginと、なぜ負のマージンを使用するのですか? これに。

マージンに関する W3C 仕様も参照してください: http://www.w3.org/TR/CSS2/box.html#margin-properties。セクション 8.3.1 では、サンプルで何が起こっているかを実際に説明しているかもしれません。Safari で正しくレンダリングされないマージンの崩壊の問題。

元の投稿:

だから私の質問は：

1) Safari が何をするかについての私の理解は正しいですか? Chrome と Firefox のレンダリングが異なるのはなぜですか? そうかもしれませんが、本当に、誰が気にしますか? 望む結果が得られていません。Safari ユーザーを気にしない場合を除き、コードを変更する必要があります。

2) 負の margin-right に基づいて親 div の幅を縮小していないだけですか? おそらくですが、繰り返しますが、それほど重要ではありません。

3) この場合、margin-right を常に div の幅以下にする適切な修正はありますか? 私はそう言うでしょう。この問題を修正して必要な結果を得るには、クラス E の div をクラス B2 の最も右側の div 内に移動します。次に、E を右にフロートさせ、position、left、および margin-right 属性を削除します。

.E {
height: 50px;
width: 10px;
background-color: black;
float: right;
}

http://jsfiddle.net/uryJJ/32/

最初の編集

.D {
height: 40px;
width: 40px;
float:left;
background-color: yellow;
position:relative;
left: -10px;
}
.E {
height: 50px;
width: 10px;
position: relative;
left: -10px;
background-color: black;
float: left;
}

http://jsfiddle.net/uryJJ/33/

于 2013-01-24T08:53:35.117 に答える
1

クラス.Dとに次の変更を加えます.E。

.D {
  float:left;
  height: 40px;
  width: 40px;
  background-color: yellow;
  margin-left: -11px;
}
.E{
  height: 50px;
  width: 10px;
  position: relative;
  left: -10px;
  background-color: black;
  float: left;
}

デモ: http://jsfiddle.net/uryJJ/22/

これが役立つことを願っています！

于 2013-01-23T18:46:52.660 に答える
0

申し訳ありませんが、私はこれを打ち負かしているかもしれませんが、これで修正されます：

.E {
height: 50px;
width: 10px;
margin-left: -10px;
background-color: black;
float: left;
}

http://jsfiddle.net/uryJJ/35/

私は今までマイナスのマージン値が好きではありませんでした。

于 2013-01-24T19:08:53.480 に答える