relative div與父表格單元格重疊

我有一個放在表格單元格內的div的問題。單元具有固定的高度和div相對於高度的位置：100％。relative div與父表格單元格重疊

td { 
    height:80px; 
    width: 80px; 
} 
.cell_text { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
    position:relative; 
}

enter image description here

的問題，當我改變div的內容和DIV高度比單元格高度更大的顯示。行爲IE和FF低於：

enter image description here

而下圖說明了Chrome瀏覽器的行爲：

enter image description here

Chrome的行爲正是我需要的，我怎麼能使其工作同樣的方式在IE和FF？

來源

2012-12-20 user947668

-1

Firefox爲控制單元格行爲提供了一些可能性，但是如果您必須支持IE7，那麼您運氣不好。 display: table-cell;在IE7或更低版本中不起作用。

來源

2012-12-20 22:13:38

這應該是一個評論，它甚至沒有試圖回答這個問題。 – kapa

仍然是一種新的張貼在這裏。謝謝你的提示！ –

我刪除了不必要的標記和CSS，現在它似乎工作正常。

position: relative沒有什麼意義，border-fix div似乎是不必要的 - 也導致了問題。表格（和display: table-cell之類的元素）在涉及到height時非常靈活 - 簡單的塊元素可能不會像在這種情況下那樣。

還有很多冗餘的CSS，請看the Fiddle。經過Chrome，FF，IE9測試。

因此，這將是標記：

<td class="border"> 
    <div class="cell_wrapper"> 
     <div class="cell_text"> 
      line-1 
     </div> 
    </div> 
</td>

和相關的CSS：

#mytable td { 
    height:80px; 
    width: 80px; 
    text-align: center; 
} 

.cell_wrapper { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

.cell_text { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
}

來源

2012-12-20 22:25:23 kapa

感謝您的幫助。不幸的是div放在相鄰的單元格中還有另一個問題：http://jsfiddle.net/PHBfd/12/。它的高度不會改變。 – user947668

@ user947668嗯，這很不好...表格單元格的問題是你不能使用'position：relative'＆stretch通過定位絕對的技巧。而且，在某些瀏覽器中，「高度：100％」似乎與最初設置的「高度」有關（正確地說，我假設）。也許你別無選擇，只能重新思考這件事。 – kapa

relative div與父表格單元格重疊

回答

相關問題