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

Question

我有2个连续的元素。在Chrome上看起来很不错，但这是IE的一个问题（多么令人惊讶）。元素之间有一个看起来像边框的空间，但事实上是背景显示。

这发生在IE10和IE9中。

http://codepen.io/anon/pen/KwEVwM

标题 底部

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中我得到了同样的问题。在margin-bottom: -1px上试试top - ＆gt;适用于IE11。

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