Question

我正在尝试将CSS翻译与CSS结合使用：在伪元素之前创建鼠标悬停时弹出的部分悬停覆盖。我看到的问题是伪元素的位置不同，具体取决于是在Chrome / Firefox还是IE（11）中查看。

我认为最简单的方式来表明我所说的是一个精简的小提琴：

在Chrome中，图像（蓝色边框）和叠加层（红色边框）之间有一个小的1像素间隙。这意味着当使用translate向上移动叠加层时，底部红色边框与底部蓝色边框不完全重叠，这是我希望它做的。现在可以通过：在伪元素之前使用“bottom：1px”属性轻松修复它，但我想了解为什么差距首先出现。

在IE中，效果更加明显，其中间隙为5px。

没有添加IE特定的CSS来弥补差异，我不知道如何最好地解决这个问题。似乎使两个浏览器保持一致的唯一方法是从img.screenshot类中删除“vertical-align：bottom”行。不幸的是，这会在图像底部和包含div之间留下间隙，因此当包含div设置为“overflow：hidden”时，前面元素的顶部是可见的。

感谢您对此有所了解！

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/

CSS翻译100％在不同浏览器中留下不同的差距

1 个答案: