隐藏溢出，在 Internet Explorer 中显示：table 和 border-radius（所有版本）

Question

我有一张图片（在示例中用绿色区域表示）应该 "masked" 在左侧有一个圆圈并垂直居中。它在 Firefox 和 Chrome 中按预期工作，但在任何版本的 IE（已测试 IE 11 和 Edge）上均无效。在 IE 上显示了图像的角，即应该被边框隐藏的图像部分。

这里是 fiddle（在 Chrome 中测试期望的结果）： http://jsfiddle.net/89j3mnj7/

.left_circle {
  width: 40px;
  height: 80px;
  border: 4px solid red;
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
}
.image-mask {
  height: 80px;
  width: 150px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border-right: 0;
  display: table;
  overflow: hidden;
}
.image-container {
  display: table-cell;
  vertical-align: middle;
}
.image {
  background-color: green;
  width: 100px;
  height: 50px;
}

<div class="left_circle">
  <div class="image-mask">
    <div class="image-container">
      <div class="image"></div>
    </div>
  </div>
</div>

Answer 1

为什么会这样？

不完全确定，如果将元素推出容器 overflow 会受到尊重，但是，overflow 似乎不适用于被 border-radius 切断的区域.该问题似乎仅在使用 display: table; 将 div 设置为显示为 table 时才会出现。这可能不是错误，而是对规范的解释，因为 Opera 似乎以相同的方式运行。

如何修复？

从 .image-mask 和 .image-container 中删除 display: table; 和 display: table-cell; 将允许 overflow 在被 border-radius 切断的区域上工作但是 .image 将失去 display: table; 提供的垂直对齐方式。我们将需要使用另一种方法来垂直对齐元素：

删除 .image-container，因为不再需要它
将position: relative;添加到.image-mask，这将允许.image相对于它
将bottom: 0;、left: 0;、margin: auto 0;、position: absolute;和top: 0;添加到.image，这将使它相对于.image-mask.

.left_circle {
  width: 40px;
  height: 80px;
  border: 4px solid red;
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
}
.image-mask {
  height: 80px;
  width: 150px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border-right: 0;
  overflow: hidden;
  position: relative;
}
.image {
  background-color: green;
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto 0;
}

<div class="left_circle">
  <div class="image-mask">
    <div class="image"></div>
  </div>
</div>

上述居中技术应该适用于 IE9。如果 IE9 不是必需的，则可以通过使用 flexbox 来实现居中：

.left_circle {
  width: 40px;
  height: 80px;
  border: 4px solid red;
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
}
.image-mask {
  height: 80px;
  width: 150px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border-right: 0;
  display: flex;
  overflow: hidden;
  align-items: center;
}
.image {
  background-color: green;
  width: 100px;
  height: 50px;
}

<div class="left_circle">
  <div class="image-mask">
    <div class="image"></div>
  </div>
</div>

隐藏溢出，在 Internet Explorer 中显示：table 和 border-radius（所有版本）

Overflow hidden, display: table and border-radius in Internet Explorer(all versions)

html

css

internet-explorer

overflow

为什么会这样？

如何修复？