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

Question

有三个div块将包含文本，其中块1和2是可选的。在这种情况下，我想使用float：left来对齐div以避免div之间的额外空间。这里是我使用的代码。此代码在IE8中正常工作，但在IE7中无法正常工作。我已经通过了职位Float left in a div does not work in IE7 but does in Firefox and 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。

首先，第一个<div>没有关闭，但这可能是由于你粘贴到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/