css - 圆 Angular 在 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 中，我遇到了同样的问题。在 top 上尝试 margin-bottom: -1px -> 在 IE11 中工作。

但我真的不知道为什么会这样。阴影或 z-index: 0

可能存在一些舍入问题