Firefox, problema IE9 + con div altezza 100% all'interno di un td (esempio di lavoro su Chrome)

Question

Prendete questo: http://jsfiddle.net/zVscL/4/

.edit-me { 
height:100%; /*does not behave the same as Chrome*/ 
width:10px; 
border:1px solid blue; 
background:red; 
float:left; 
overflow: auto; 
} 

Aprire la pagina su Chrome, quindi Firefox. Il div blu non eredita

C'è una spiegazione perché questo accade? Qualche correzione? Sono preferibili soluzioni Pure HTML/CSS.

Sono stato a questa merda per ore cercando di convincere i CSS a comportarsi e quando finalmente FF lo fa. Mangiando il mio tempo di sviluppo.

Answer 1

impostare l'altezza del tr e td-100% Prova:

tr, td { height: 100%; } 

generale per arrivare height: 100% per funzionare correttamente, tutte le altezze dei genitori del elemento deve essere impostato come bene.

EDIT:

Una soluzione alternativa è quella di avvolgere il contenuto della td con un contenitore div e utilizzare il posizionamento assoluto per garantire la .edit-me div sia efficace al 100% altezza.

Ecco cosa il codice HTML sarà simile:

<table border="1"> 
    <tr> 
     <td> 
      <div class="container"> 
       <div class="edit-me"></div> 
       Foo 
       <br/> 
       Bar 
      </div> 
     </td> 
     <td>hello</td> 
    </tr> 
</table> 

e CSS:

.container { 
    position: relative; 
    padding-left: 10px; 
} 

.edit-me { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 

    width:10px; 
    border:1px solid blue; 
    background:red; 
    overflow: auto; 
} 

Spero che questo aiuti!