不同浏览器中不同的翻转图像大小调整

Question

我已经在我的网站上创建了一些翻转图像，但是他们无法正确地替换他们的合并on-hover好友。 奇怪的是，不同的浏览器弄乱了不同的图像，我已经看过每一个细节，但是找不到原因，为什么这个特定的翻转图像会以我不希望的方式悬停。

我不知道是否允许发布链接，但如果您认为这是一个广告，您可以跳过它：pheast.ru。页面顶部{}中的图像行。它是灰色的背景。

这是标记： CSS：

a#pic1 {
  display: inline-block;
  background: url(о.png) no-repeat;
  width:200px;
  height:108px;
  background-size: contain;
  border:none;
  margin-right:10px;

}
a#pic1:hover {
  background: url(old-old-doctransicon1.png) no-repeat;
  width:200px;
  height:108px;
  background-size: contain;
}

以及每张下一张照片。

HTML：

<a id="pic1" href="documents.html"></a>
<a id="pic2" href="literature.html"></a>
<a id="pic3" href="media.html"></a>
<a id="pic4" href="webdocuments.html"></a>
<a id="pic6" href="correspondence.html"></a>