Html CSS translate 100%在不同浏览器中留下不同的空白

我正在尝试将CSS转换与CSS:before伪元素结合使用，以创建鼠标悬停时弹出的部分悬停覆盖。我看到的问题是，伪元素的位置不同，这取决于它是在Chrome/Firefox还是IE（11）中查看的

我想最简单的方法就是用一把简陋的小提琴来表达我所说的：

在Chrome中，图像（蓝色边框）和覆盖层（红色边框）之间有一个1像素的小间隙。这意味着当使用translate向上移动覆盖时，底部的红色边框不会完全覆盖底部的蓝色边框，这正是我希望它所做的。现在，在：before伪元素上使用一个“bottom:1px”属性就可以很容易地解决这个问题，但是我想首先理解为什么会出现这种差距

在IE中，这种效应更为明显，间隙为5px

除了添加特定于IE的CSS来弥补差异之外，我不知道如何最好地解决这个问题。使两个浏览器保持一致的唯一方法是从img.screenshot类中删除“垂直对齐：底部”行。不幸的是，这在图像的底部和包含的div之间留下了一个间隙，因此：before元素的顶部在包含的div设置为“overflow:hidden”时可见

谢谢你能告诉我这件事

HTML:

---

我不知道为什么，但将链接设置为块级别似乎可以解决这个问题：

a.sslink {
    display: block;
    position: relative;
}

---

我要冒险提出，这与浏览器处理

inline

元素之间空白的方式有关。不过是纯种的，我会被诅咒的。我认为Jon P关于如何处理内联元素的观点是正确的，我曾尝试过使imgs显示：block，但这导致了各种各样的格式化问题（必须使用float，然后这完全破坏了：before伪元素，因为容器的高度为0px）。因为某种原因，从来并没有想过用标签试一下。谢谢你的提示！

a {
    position: relative;
}

.screenshots {
    /* overflow: hidden; */ 
}

img.screenshot {
    vertical-align: bottom;
    width: 32%;
    margin-left: 2%;
    border: 3px solid blue;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img.screenshot:first-child {
    margin-left: 0;
}

a.sslink:hover {
    padding: 0;
    margin: 0;
    margin-right: 2%;
    background: none;
}
a.sslink:last-child:hover {
    margin-right: 0;
}

a.sslink::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    background: rgba(255,255,255,0.5);
    border: solid 3px red;
    content: 'Launch website';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-transform 0.25s;
    -moz-transition: -moz-transform 0.25s;
    transition: transform 0.25s;
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
}

a.sslink:hover::before,
a.sslink:focus::before {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

a.sslink {
    display: block;
    position: relative;
}