html - 溢出隐藏，显示: 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 似乎不适用于由 切断的区域边框半径。仅当使用 display: table; 将 div 设置为像表格一样显示时，才会出现此问题。这可能不是一个错误，而是对规范的解释，因为 Opera 似乎以相同的方式运行。

如何修复？

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

• 删除 .image-container，因为不再需要它
• 将 position:relative; 添加到 .image-mask，这将允许 .image 相对于它定位
• 添加底部:0;，左:0;，边距:自动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>