Firefox, IE9 + problem z div wysokość 100% wewnątrz td (przykład pracuje nad Chrome)

Question

Weź to: 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; 
} 

otworzyć stronę w Chrome, następnie Firefox. Niebieski div nie dziedziczy

Czy istnieje wyjaśnienie, dlaczego tak się dzieje? Jakieś poprawki? Preferowane są czyste rozwiązania HTML/CSS.

Byłem w tym gównie od wielu godzin, próbując sprawić, by CSS zachowywał się i kiedy w końcu zrobiłem to FF. Spożywanie mojego czasu rozwoju.

Answer 1

spróbuj ustawić wysokość tr i td do 100%:

tr, td { height: 100%; } 

Generalnie dostać height: 100% pracować prawidłowo, wszystkie szczyty rodziców element musi być ustawiony jako dobrze.

Edycja:

Alternatywnym rozwiązaniem jest owinięcie zawartości td z pojemnikiem div i wykorzystanie pozycjonowania absolutnego do zapewnienia .edit-me Div skutecznie posiada 100% wzrost.

Oto co HTML wyglądałby następująco:

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

i 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; 
} 

Nadzieja to pomaga!