左浮动在 IE7 中不起作用，但在 IE8 sharepoint .aspx 页面中起作用

Question

div 的三个块将包含文本，其中块 1 和 2 是可选的。在这种情况下，我想使用 float:left 对齐 div 以避免 div 之间有额外的空间。这是我使用的代码。这段代码在 IE8 中工作正常，但在 IE7 中不行。我已经浏览了这篇文章div 中的左浮动在 IE7 中不起作用，但在 Firefox 和 IE8 中起作用。但它不起作用。

代码：

  <div style="width:1120px;overflow:auto">
   <div id="_invisibleIfEmpty" name="_invisibleIfEmpty" 
      style="overflow:hidden; vertical-align:text-top; float:left;height:100%;width:33%;display:table-row"> 
                Block 1 </div >
 <div id="_invisibleIfEmpty" name="_invisibleIfEmpty"

    style="overflow:hidden;vertical-align:text-top;padding-left:5px;height:100%;width:33%;float:left;display:table-row;"> 
                Block 2</div >
 <div id="_invisibleIfEmpty" name="_invisibleIfEmpty" style="overflow:hidden;vertical-align:text-top;padding-left:5px;height:100%;width:33%;float:left;display:table-row"> 
                Block 3 </div >

Answer 1

我不知道 ESPN 中的 ASP，但我可以告诉你 1. 标记一团糟，2. 你对 CSS 的思考太多了。

首先，第一个

没有关闭，但这可能是由于您粘贴到 SO 中造成的。其次，三个内部 div 具有相同的 ID - 这是一个禁忌。第三，您的样式都是内联的，这也不理想，但我假设您为了简洁起见将它们粘贴到这里。

您的标记可以大大简化：

  <div id="container">
    <div class="block _invisibleIfEmpty" id="block_1" name="_invisibleIfEmpty" > 
       Block 1 </div>
    <div class="block _invisibleIfEmpty" id="block_2" name="_invisibleIfEmpty"> 
       Block 2</div>
    <div class="block _invisibleIfEmpty" id="block_3" name="_invisibleIfEmpty" > 
       Block 3</div>
  </div>​

然后这个 CSS 应该可以让您到达您需要的位置：

#container {
    width: 1120px; 
    height: 100px;       
}

.block {
    width: 33%;
    float: left; 
    height: 100%;
}​

您可以根据口味调整高度。如果需要，您可以添加溢出值 - 但不需要“overflow:auto”，因为这是 CSS 中的默认值。仅当先前的样式声明了不同的“溢出”值并且您想要撤消该值时，您才需要这样做。

PS：我对此进行了测试，它可以在 IE7 中运行： http://jsfiddle.net/xZ2Az/1/