html - overflow hidden ，显示: table and border-radius in Internet Explorer(all versions)

Question

我有一个图像(在示例中由绿色区域表示)应该被左侧的圆圈“遮盖”并垂直居中。它在 Firefox 和 Chrome 中按预期工作，但在任何版本的 IE(已测试 IE 11 和 Edge)上均无效。在 IE 上显示了图像的 Angular ，即应该被边框隐藏的图像部分。

这是 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 切断的区域.该问题似乎仅在 div 时出现使用 display: table; 将 s 设置为像表格一样显示.这可能不是错误，而是对规范的解释，因为 Opera 似乎以相同的方式运行。

如何修复？

删除 display: table;和 display: table-cell;来自 .image-mask和 .image-container将允许 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>