Question

我有这个经典的<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属性定义不明确。有没有办法在没有背景图像的情况下获得所需的效果？结果必须是可打印的。

更新我也不想使用Javascript。我希望它是我的最后一招。

Answer 1

溢出：隐藏有一个意义 - 这就是隐藏了＃34;定义的所有内容＆＃34;区域。这意味着你将需要定义你的宽度/高度或两者都将是什么，它将隐藏任何不适合那里的东西。

Answer 2

尝试在表格元素上使用table-layout:fixed并在td上定义宽度/高度。它阻止布局引擎尝试根据其内容调整表格单元格。它仍然不适合工作，但它是你最好的镜头。坦率地说，虽然我认为不能真的做到。

我应该指出表格单元格上的overflow实际上是明确定义的 - 标准特别不支持它。你正在做的是一个黑客。

Answer 3

您可能想要使用CSS Clip属性，它甚至不是CSS3。看起来它适合你的情况。

剪辑属性就像一个面具。它允许您以矩形形状掩盖元素的内容。

检查下面的链接并阅读CSS剪辑部分。 http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties

具有溢出的表格单元格：隐藏且绝对定位的元素

3 个答案: