CSS翻譯100％在不同的瀏覽器中留下不同的空白

Question

我想在CSS之前使用CSS翻譯：在pseudoelement之前創建一個在mouseover上彈出的部分懸停覆蓋。我看到的問題是，僞元素的位置有所不同，具體取決於是在Chrome/Firefox還是IE（11）中查看。

我想最簡單的方式來顯示是一個剝離下來的小提琴什麼我談論：

http://jsfiddle.net/YMCjL/3/

在Chrome中有圖像之間的小1個像素的差距（藍色邊框）和覆蓋圖（紅色邊框）。這意味着當使用平移將覆蓋圖向上移動時，底部的紅色邊框不會完全重疊底部的藍色邊框，這是我想要的。現在，在僞元素之前，我們可以很容易地使用「bottom：1px」屬性來解決這個問題，但我想知道爲什麼差距首先出現。

在IE中，效果更加明顯，其中差距爲5px。

缺少添加IE特定的CSS來彌補差異，我不知道如何最好地解決這個問題。似乎使這兩個瀏覽器保持一致的唯一方法是從img.screenshot類中刪除「vertical-align：bottom」行。不幸的是，這會在圖像的底部和包含div之間留下間隙，因此當包含div設置爲「overflow：hidden」時，before元素的頂部是可見的。

感謝您提供的任何燈光！

HTML：

<article> 
    <div class="screenshots"> 
     <a href="photo" target="_blank" class="sslink"><img src="images/photo1_s.jpg" class="screenshot"><img src="images/photo2_s.jpg" class="screenshot"><img src="images/photo3_s.jpg" class="screenshot"></a> 
    </div> 
    <div class="description"> 
     some content 
    </div> 
</article> 

CSS：

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); 
} 

Answer 1

我不知道爲什麼，但設置你的鏈接是塊級似乎解決它：

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

http://jsfiddle.net/YMCjL/8/