Html 添加重叠的边缘浏览器"；“边缘”；到透明div

我注意到，如果我有5个div元素，它们都共享边，当CSS转换运行时，边开始重叠。我制作了这个JSFiddle来演示效果。单击“更改”按钮几次，您应该开始看到问题

注意：在Chrome、IE和Firefox中，我没有看到这种行为。唯一的优势

有没有办法防止这种情况发生

下面是我看到的图像：

var高度=100；
var宽度=100；
$（函数（）{
变量变化=$（“#变化”）
var top=$（“#top”）
var bottom=$（“#bottom”）
var left=$（“#left”）
var right=$（“#right”）
变量中心=$（“#中心”）
var update=函数（）{
var windowWidth=$（window.width（）；
var windowHeight=$（window.height（）；
top.css({
左:0,，
排名：0，
宽度：“100%”，
高度：高度+px
});
bottom.css({
左:0,，
顶部：（2*高度）+“px”，
宽度：“100%”，
高度：（窗高-（2*height））+“px”
});
left.css({
左:0,，
顶部：高度+px，
宽度：（（windowWidth-width）/2）+“px”，
高度：高度+px
});
right.css({
左：（（窗口宽度+宽度）/2）+“px”，
顶部：高度+px，
宽度：（（windowWidth-width）/2）+“px”，
高度：高度+px
});
center.css({
左：（（windowWidth-width）/2）+“px”，
顶部：高度+px，
宽度：宽度+px，
高度：高度+px
});
}
$（窗口）。调整大小（更新）；
更新（）；
更改。单击（函数（）{
高度=高度===100？200:100；
宽度=宽度===100？200:100；
center.toggleClass（'未显示'）
更新（）；
})
})

#更改{
位置：绝对位置；
顶部：10px；
左：10px；
z指数：15；
}
.背景{
背景色：rgba（0,0,0,0.5）；
/*背景色：rgba（255、255、255、0.5）*/
-moz过渡：不透明度0.1s缓进缓出；
-o型过渡：不透明度0.1s缓进缓出；
-webkit转换：不透明度0.1s易入易出；
过渡：不透明度0.25s缓进缓出；
不透明度：1；
显示：块；
位置：绝对位置；
z指数：10；
}
.background.未显示{
不透明度：0！重要；
}

改变

您可以仅为Microsoft browser edge将删除动画的transition属性设置为none，但这将解决您的问题

这是最新的小提琴

transition:none;

---

我认为这是某种舍入问题。或边缘模糊。 但无论如何，我发现了一些有效的方法：

.backdrop {
   outline: 1px solid transparent;
}

---

你可以尝试更改边框的颜色或大小，使边框不可见。效果很好！非常感谢。