Question

不幸的是我必须支持IE7（最好是IE6）在IE8，Safari，Firefox，Chrome中，我获得了一个非常好的布局，只需要一个外部div就可以使用两个盒子。

------------------------------------
|                                  |
|  --------------     -----------  |
|  |            |     |         |  |
|  |     A      |     |    B    |  |
|  |            |     |         |  |
|  --------------     -----------  |
|                                  |
------------------------------------

我使用内联块来设置A和B的样式.A向左浮动，B向右浮动。两个盒子都有内部div和其他元素。

然而，当我使用IE6和IE7时，我得到了这种怪异。

------------------------------------
|                                  |
|  --------------                  |
|  |            |                  |
|  |     A      |                  |
|  |            |                  |
|  --------------                  |
|                     -----------  |
|                     |         |  |
|                     |    B    |  |
|                     |         |  |
|                     -----------  |
|                                  |
------------------------------------

对正在发生的事情及如何解决问题的任何明确答案？

Answer 1

首先，将DOCTYPE放在文档的顶部。这迫使IE符合标准而不是怪癖模式（两者都是委婉语）。例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

其次，如果你想要IE6兼容性使用浮点数（安德鲁在说明display: inline-block仅适用于具有自然display: inline且<div>的自然display: block元素的IE7中时非常正确}）。这应该有效：

<div id="outer">
  <div id="left"></div>
  <div id="right"><>/div>
</div>

使用：

#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }

只要左右宽度小于外部宽度，包括填充，边框和边距。如果没有，右边将下拉到下一行。

Answer 2

在IE 6和7中，内联块仅适用于具有自然显示的元素：内联。你的盒子是<div>吗？如果是，它应该工作..你有测试用例吗？（有关详细信息，请参阅quirksmode.org。）

IE block level element inline-block hack：这可能对您有用

用IE7阻塞对齐困难，如何解决？

2 个答案: