Question

请看下面的链接（尽管结果窗口稍微宽一些）然后告诉我为什么当悬停覆盖完全加载时，盒子顶部和侧面仍有一些白线？当我为这些div设置背景图像时，问题仍然存在（无论是SVG还是PNG文件都无关紧要。）

.link-picture-small {
position: relative;
display: block;
margin: auto;
width: 100%;
height: 17.5em;
background: #FFFFFF;§
background-size: 100%;
border-radius: 0.625em;
}

.overlay {
position: absolute;
display: table;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
width: 100%;
height: 100%;
background: #212121;
border-radius: 0.625em;
opacity: 0;
-webkit-transition: all 1.15s ease-out;
   -moz-transition: all 1.15s ease-out;
   -moz-transition: all 1.15s ease-out;
        transition: all 1.15s ease-out; 
}

.overlay p {
display: table-cell;
vertical-align: middle;
}

.link-picture-small:hover .overlay {
opacity: 0.99;
}

http://jsfiddle.net/hatK5/

我使用Chrome（最新版本）遇到了这个问题。这个问题在Firefox中并不存在（非常令人惊讶！）在Safari中。

是否有任何聪明的技巧可以让它在Google浏览器中正常运行？

Answer 1

我认为这是因为display:table。

我会建议一种方法，但我不确定这是否是最好的。

删除

display: table;

添加

padding-top: 50%; box-sizing: border-box; webkit-box-sizing: border-box;

Fiddle

Answer 2

由于您绝对定位.overlay，因此您无需将其display设置为table。

这是一个小提琴：http://jsfiddle.net/hatK5/3/。

.overlay {
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    background: #212121;
    border-radius: 0.625em;
    opacity: 0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

Chrome无法正确渲染纯css叠加层

2 个答案:

Fiddle