С плавающей точкой слева не работает в IE7, но работает в IE8 sharepoint .aspx page

Question

Есть три блока div, которые будут содержать текст, где блоки 1 и 2 являются необязательными.в этом случае я хочу выровнять div, используя float: left, чтобы избежать дополнительного пространства между 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

Я не знаю ASP из ESPN, но могу вам сказать, 1. разметка - это беспорядок, и 2. вы слишком продумываете CSS.

Прежде всего, первый <div> не закрылся, но это может быть связано с тем, что вы вставили в SO. Во-вторых, три внутренних элемента имеют одинаковый идентификатор - это нет-нет. В-третьих, все ваши стили встроены, что тоже не идеально, но я предполагаю, что вы вставляете их здесь для краткости.

Ваша разметка может быть значительно упрощена:

  <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/