问边界地区有多个SVG背景

EN

我有一个DIV图像，我是作为一个按钮的风格。为此，我使用两个背景图像(SVG格式)和一个边框(为了调试目的，边框非常大)。我要在边界下显示背景图像。模拟CSS：

.element {
background: url(bg1.svg) no-repeat,
    url(bg2.svg) no-repeat;
background-clip:border-box, border-box;
-webkit-background-clip:border-box;
-moz-background-clip:border-box;
background-size: cover, cover;
border: 10px inset rgba(255, 255, 255, .20);
}

还请注意，元素是一个flex框，因此它是动态调整大小的。

的结果是： Chrome、IE、Firefox和Safari都会显示边框下面的背景，但并不是全部。

Chrome和IE只显示边框底部的背景。

Chrome在背景和边框之间也有一两个px。

对于为什么会出现这个问题，或者如何解决它，有什么想法吗？

编辑：当图像是PNG格式时，Chrome的背景和边框之间的小差距通常不是问题。问题似乎是背景的规模不够大。知道怎么解决吗？