的Firefox，IE9 +問題與TD（工作Chrome範例）

Question

裏面的div高度100％拿這個：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; 
} 

打開在Chrome頁面，則Firefox瀏覽器。藍色的div不會繼承

有沒有解釋爲什麼會發生這種情況？任何修復？純HTML/CSS解決方案更可取。

我一直在這個狗屎幾個小時試圖讓CSS的行爲，當我終於做FF這樣做。吃掉我的開發時間。

Answer 1

嘗試tr和td的高度設置爲100％：

tr, td { height: 100%; } 

一般來說得到height: 100%正常工作，該元素的父母都高度必須設置爲好。

編輯：

另一種解決方案是與容器div包裹td的內容，並使用絕對定位，以確保.edit-me格設置有效地具有100％的高度。

這裏的HTML是什麼樣子：

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

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

希望這有助於！