Html 溢出隐藏，显示：Internet Explorer中的表格和边框半径（所有版本）

我有一个图像（在示例中由一个绿色区域表示），它应该被左侧的一个圆圈“遮住”，并垂直居中。它可以在Firefox和Chrome中正常工作，但不能在任何版本的IE上工作（经过测试的IE 11和Edge）。在IE上显示图像的角点，即图像中被边框隐藏的部分

这是小提琴（在铬中测试所需结果）：

。左\u圆{
宽度：40px；
高度：80px；
边框：4倍纯红；
边框左上半径：200px；
边框左下半径：200px；
}
.图像遮罩{
高度：80px；
宽度：150px；
边框左上半径：40px；
边框左下半径：40px；
右边界：0；
显示：表格；
溢出：隐藏；
}
.图像容器{
显示：表格单元格；
垂直对齐：中间对齐；
}
.形象{
背景颜色：绿色；
宽度：100px；
高度：50px；
}

为什么会发生这种情况？ 不完全确定，如果您将元素推出容器，则

溢出

受到尊重，但是

溢出

似乎不适用于被

边界半径

切断的区域。只有当使用

display:table将
div
s设置为像表格一样显示时，才会出现此问题。这可能不是一个bug，而是对规范的一种解释，因为Opera似乎以同样的方式运行

怎么能修好呢？
删除
显示：表格和
显示：表格单元格的代码>图像掩码
和
图像容器
将允许
溢出
在
边界半径
切断的区域上工作，但
。图像
将失去
显示：表格的垂直对齐提供。我们需要使用另一种方法垂直对齐元素：


删除
.image容器
，因为不再需要它
添加
位置：相对
到
.image mask
，这将允许
.image
相对于它进行定位
添加
底部：0，
左：0，
边距：自动0，
位置：绝对位置和<代码>顶部：0
到
.image
，这将使其相对于
.image mask垂直居中。



。左\u圆{
宽度：40px；
高度：80px；
边框：4倍纯红；
边框左上半径：200px；
边框左下半径：200px；
}
.图像遮罩{
高度：80px；
宽度：150px；
边框左上半径：40px；
边框左下半径：40px；
右边界：0；
溢出：隐藏；
位置：相对位置；
}
.形象{
背景颜色：绿色；
宽度：100px；
高度：50px；
位置：绝对位置；
排名：0；
左：0；
底部：0；
保证金：自动0；
}

使用显示：表格的任何特定原因？如果没有，那么您可以使用
display:flex（减去IE问题）。如果这是你想要的，我很乐意把它充实成一个答案。这与IE中
表
元素的显示方式有关——如果你将显示更改为
块
或
内联块
，它确实隐藏了溢出（但不要看你想要的样子——这不是解决方案，除非你能把绿色区域向下移动一点）@freginold:那我还能将图像居中吗？我希望图像垂直居中circle@HiddenHobbes：我需要IE 9的支持，但谢谢你的提示！我想这可能是一个要求，@Mike，还有其他垂直对齐内容的方法，我会看看是否能想出另一个解决方案。谢谢！很好没问题，很高兴我能帮上忙。