表格单元格溢出：隐藏和绝对定位的元素

我有这个经典的<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

表格单元格溢出：隐藏和绝对定位的元素

回答

相关问题