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

我有一个经典的

，它具有style属性

overflow:hidden

集。在单元格内，我放置了一个

，带有

位置：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。我希望这是我最后的选择。

尝试使用

表格布局：在表格元素上固定
，在
td
上定义宽度/高度。它会阻止布局引擎尝试根据表格单元格的内容调整表格单元格。这仍然不需要工作，但这是你最好的机会。坦白地说，虽然我不认为这真的能做到

我应该指出，表单元格上的
溢出
实际上是定义良好的-标准特别不支持它。你所做的是一个黑客行为。
溢出：隐藏有一个含义——隐藏所有超出“定义”区域的东西。这意味着您需要定义宽度/高度，或者两者都是，它将隐藏任何不适合的des。
您可能需要使用CSS Clip属性，它甚至不是CSS3。看起来很适合你的情况

“剪辑”属性类似于遮罩。它允许您在矩形形状中屏蔽元素的内容

检查下面的链接并阅读CSS剪辑部分。
我可以使用它，但由于单元格的高度是可变的，所以我不能真正使用它。没有Javascript也不行：我可以使用它，而且修复一切都很容易，但我想使用纯CSS解决方案。你不必使用
overflow:hidden
定义每个元素的宽度和高度，让它剪裁边界之外的内容。不管怎么说，我不能用那些细胞做那件事。这确实是一种黑客行为。太糟糕了，我不能给单元格设置一个固定的高度，因为它们的高度是可变的。我建议您使用
标记的
宽度
和
高度
属性来塑造表格单元格内的图像。但在这种情况下似乎没有用。