1

OrangeIE9がdivを隣に配置しないのはなぜBlueですか?divは、ChromeやFirefoxなどの他のより文明的なブラウザで問題なくレンダリングされます。幅の値はマージンを含めて完全に一致しますが、IE9で横に表示Grayされるようにするには、たとえばdivから余分な4ピクセルを削除する必要があります(もちろん、1つの右側に4ピクセルのギャップが残ります)。 )。OrangeBlueOrange

<div style="margin-top: 100px; background-color: GreenYellow; width: 740px; height: 100px; padding: 0px; overflow: visible;">
  <div style="background-color: CadetBlue; width: 210px; height: 100px; margin: 0px; padding: 0px; float: left; overflow: visible;">
  </div>
  <div style="background-color: Black; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
  </div>
  <div style="background-color: FireBrick; width: 318px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
    <div style="background-color: LightSalmon; width: 318px; height: 48px; margin: 0px; padding: 0px; overflow: visible;">

      <!-- Gray -->
      <div style="width: 214px; height: 48px; margin: 0px 0px 0px 0px; padding: 0px; float: left; background-color: #333333; overflow: visible;">
      </div>

      <!-- Blue -->
      <div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: #00A8EC; overflow: visible;">
      </div>

      <!-- Orange -->
      <div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: Orange; overflow: visible;">
      </div>

    </div>
    <div style="background-color: Gainsboro; width: 318px; height: 48px; margin: 4px 0px 0px 0px; padding: 0px; overflow: visible;">
    </div>
  </div>
  <div style="background-color: Purple; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
  </div>
</div>

では、どうすればこれを修正できますか?それは私を殺している...

フィドル: http: //jsfiddle.net/LE6cy/

アップデート

わかりました。これが影響するかどうかはわかりませんでしたが、これらのdivの前のページにもう1つあります。プレーンなテーブルです。テーブルがそこにあると、エラーが表示されるようです。したがって、ここにHTMLページ全体があります(実際には):

<table id="signature" cellspacing="4" cellpadding="0" style="width: 750px; height: 100px; border: 0px;">
  <tr>
    <td rowspan="2" style="height: 100px; width: 210px; background-color: #336666;">
    </td>
  </tr>
</table>

<div style="margin-top: 100px; background-color: GreenYellow; width: 740px; height: 100px; padding: 0px; overflow: visible;">
  <div style="background-color: CadetBlue; width: 210px; height: 100px; margin: 0px; padding: 0px; float: left; overflow: visible;">
  </div>
  <div style="background-color: Black; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
  </div>
  <div style="background-color: FireBrick; width: 318px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
    <div style="background-color: LightSalmon; width: 318px; height: 48px; margin: 0px; padding: 0px; overflow: visible;">

      <!-- Gray -->
      <div style="width: 214px; height: 48px; margin: 0px 0px 0px 0px; padding: 0px; float: left; background-color: #333333; overflow: visible;">
      </div>

      <!-- Blue -->
      <div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: #00A8EC; overflow: visible;">
      </div>

      <!-- Orange -->
      <div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: Orange; overflow: visible;">
      </div>

    </div>
    <div style="background-color: Gainsboro; width: 318px; height: 48px; margin: 4px 0px 0px 0px; padding: 0px; overflow: visible;">
    </div>
  </div>
  <div style="background-color: Purple; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
  </div>
</div>
4

2 に答える 2

0

マークアップにDoctypeが設定されていますか?私はフィドルhttp://jsfiddle.net/LE6cyを作成しましたが、IE9とFirefoxによる同様のレンダリングが表示されます。Jsfiddleは<!doctype html>、デフォルトで結果のiframeに設定されています。

于 2012-11-15T12:52:21.970 に答える
-1

<div>が左に浮いているので、空のテキストノードを削除してみてください

于 2012-11-15T10:48:43.477 に答える