在IE 8中使用CSS float：left，clear：both和display：inline-block时出现问题

Question

我正在尝试使用CSS在我的页面上布局一个部分。这个Web应用程序需要在IE 8中专门工作。我尝试了几种不同的“float：left”组合。 “clear：both”和“display：inline-block”试图实现我想要的布局，但我显然做错了。

我在所有DIV周围放置了红色边框，以帮助我尝试解决这个问题，如下图所示。

前两部分正确排队。这是我遇到麻烦的“地址”部分（本节以“住址：”开头）。

我希望自己有以下几点：
居住地址;
Residence Town，州/省，ZIP;
住宅一样吗？;
邮寄地址;
邮寄镇，邮寄州/省，ZIP;

我还希望封闭的DIV只能与我读过的最宽的一行一样宽，可以使用“display：inline-block”来完成。

出于某种原因，当我使用“display：inline-block”并且我将剩下的封闭DIV浮动时，它们上面有多个元素的行（即Residence Town，State / Province，ZIP）不会停留在一行 - 即使浏览器最大化，ZIP通常也会包含在较低的行中。

我希望我在这里很清楚，但如果需要，我当然可以进一步澄清。

感谢。

Answer 1

这是一种方式，虽然可能不是最干净的解决方案：

<强> CSS

.newline {display:block;float:left;}
.formput {float:left;}
.clear {clear:both;}

<强> HTML

<form>
<div class="newline">
  <div class="formput">
    Residence Address<br />
    <input type="text" />
  </div>
  <div class="formput">
    State / Province<br />
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>  
  </div>
  <div class="formput">
    Zip<br />
    <input type="text" />
  </div>
  <div class="formput">
    Mailing Address<br />
    <input type="text" />
  </div>
  <div class="formput">
    Mailing State / Province<br />
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>  
  </div>
  <div class="formput">
    Mailing Zip<br />
    <input type="text" />
  </div>
  <div class="clear" />
</div>
<div class="newline">
  <div class="formput">
    Residence Town<br />
    <input type="text" />
  </div>
</div>
<div class="clear" />
<div class="newline">
  <div class="formput">
    Same as Residence? <input type="checkbox"/>
  </div>
</div>
<div class="clear" />
<div class="newline">
  <div class="formput">
    Mailing Address<br />
    <input type="text">
  </div>
</div>
</form>

我认为包含明确的div：两者都在做伎俩。