2

画像が入った左側のフローティング div があり、右側にいくつかの div のスタックがあるという問題があります。互換モードの場合、FF、Chrome、IE9 では問題なく表示されますが、通常の IE9 で表示すると、一番下の div が画像の下に押し込まれます...

左のdiv:

{
float: left;
clear: both;
margin-right: 10px;
}

右の div (IE9 の下に表示されているもの):

width: 350px;
float: right;
margin-left: 10px;
height: 150px;
overflow: hidden;

IE9 では次のようになります: http://i.imgur.com/tXgAZaN.png

Chrome または FF での表示は次のとおりです: http://i.imgur.com/yLOFvew.png

4

3 に答える 3

4

これは、明確な問題の 1 つだと思います。私も時々これらの問題に遭遇します。修正またはハックは、正しくレンダリングするために、常に新しい要素、いわゆる疑似要素を追加することです。そう

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

ここで cf がコンテンツになります

http://nicolasgallagher.com/micro-clearfix-hack/から

これで問題が解決することを願っています。お知らせください。

于 2013-03-27T17:37:26.547 に答える
0

左の div に幅を与えてみてください。合計が合計されることを確認してください;-)

于 2013-03-27T17:34:58.097 に答える
0

やること3つ。

  1. 左右の div があるコンテナーの合計幅を割り当てます。
  2. 幅を左幅に割り当てます。右の div のテキストが一緒にマージされないようにします。
  3. クラス clr の別の div を右 div の後に配置して、左右の div が保持されるコンテナー内のフロートをクリアします。

例：

<div id="container">
  <div id="left_div">

  </div>
  <div id="right_div">

  </div>
  <div class="clr" style="clear:both;"></div>
</div>

すべてのブラウザで動作します。

left_div と right_div の合計幅がコンテナーを超えてはならないことに注意してください。

于 2013-03-27T19:16:11.913 に答える