表格單元格溢出：隱藏和絕對定位的元素

我有這個經典的<td>其中有風格屬性overflow: hidden設置。在單元格內部，我將<div>與position: relative放在一起，並且在塊內部存在絕對定位的大圖像，我希望將其裁剪到單元格的邊界。有意義的例子：表格單元格溢出：隱藏和絕對定位的元素

... 
<td style="overflow: hidden;"> 
    <div style="position: relative;"> 
     <img style="position: absolute; left: 0px; top: 50%;" src="verylargeimage.png" /> 
    </div> 
</td> 
...

似乎在IE8，IE9，Firefox和Opera做工精細，但它無法在Chrome：圖像跨越小區的邊界。

我在IE中打印頁面時具有相同的行爲。

我知道表格單元格上的overflow屬性沒有很好的定義。有什麼辦法可以獲得想要的效果沒有使用背景圖片？結果必須是可打印的。

UPDATE我也不想使用Javascript。我希望它是我最後的手段。

來源

2012-04-03 MaxArt

我建議你使用''標籤的'width'和'height'屬性來塑造table-cell中的圖像。但在這種情況下似乎沒有用。 – tusar 2012-04-03 11:24:40

嘗試使用表元素上的table-layout:fixed並在td上定義寬度/高度。它會停止佈局引擎嘗試根據其內容調整表格單元格。它仍然不敢上班，但這是你最好的選擇。坦率地說，雖然我不認爲它確實可以做到。

我應該指出表格單元上的overflow實際上是明確定義的 - 該標準特別不支持它。你在做什麼是一個黑客。

來源

2012-04-03 10:42:29 SpliFF

的確是這樣。太糟糕了，我不能把固定的高度放到細胞上，因爲它們的高度是可變的。 – MaxArt 2012-04-03 11:09:04

溢出：隱藏有一個含義 - 哪些是隱藏所有出「定義」區域的內容。這意味着你將需要定義什麼是你的寬度/高度，或者兩者都將是，它會隱藏任何不適合的東西。

來源

2012-04-03 10:46:25 user769889

您不必定義每個元素的寬度和高度，使用'overflow：hidden'來限制它的邊界之外的東西。無論如何，我無法用這些細胞做到這一點。 – MaxArt 2012-04-03 11:07:47

您可能想要使用CSS剪輯屬性，它甚至不是CSS3。看起來它適合你的情況。

clip屬性就像一個掩碼。它允許您以矩形形狀掩蓋元素的內容。

檢查下面的鏈接並閱讀CSS Clip部分。 http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties

來源

2012-04-03 10:52:01 bhansali

我可以使用它，但由於單元格的高度是可變的，我不能真正使用它。不是沒有Javascript：我可以使用它，這將是很容易解決一切，但我想使用純粹的CSS解決方案。 – MaxArt 2012-04-03 11:04:42

表格單元格溢出：隱藏和絕對定位的元素

回答

相關問題