圆角在 Internet Explorer 中的连续元素之间创建边界

Question

我有两个连续的元素。在 Chrome 上一切正常，但 IE 存在问题（真令人惊讶）。元素之间有一个东西 space 看起来像边框，但实际上是背景显示出来。

这在 IE10 和 IE9 中发生。

标题底部

body {
  background: blue;
}

.top {
    background: white;
  border-radius: 10px;
  padding: 10px;
  border-right: 6px solid #D7D7D7;
  border-bottom: 6px solid #B9B9B9;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
  box-sizing: border-box;
  margin-bottom: 20px;
  padding-top: 15px;
  padding-bottom: 5px;
  padding-right: 25px;
  float: left;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  position: relative;
  z-index: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.bottom {
    background: white;
  border-radius: 10px;
  padding: 10px;
  border-right: 6px solid #D7D7D7;
  border-bottom: 6px solid #B9B9B9;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
  box-sizing: border-box;
  margin-bottom: 20px;
  border-top-left-radius: 0;
  position: relative;
  z-index: 0;
  clear: both;
}

Answer 1

真的很有趣。在 IE11 中，我遇到了同样的问题。在 top 上尝试 margin-bottom: -1px -> 在 IE11 中工作。

但我真的不知道为什么会这样。也许阴影有一些舍入问题，或者 z-index: 0

圆角在 Internet Explorer 中的连续元素之间创建边界

Rounded corner creates a border between consecutive elements in Internet Explorer

css

internet-explorer