html - Figcaption 在使用 transition 时有 margin-top，不知道为什么

Question

我正在使用 figure 和 figcaption 将标题过渡到图像上，并且过渡工作正常，但 figcaption 背景位于实际图像之外几个像素(顶部)。

我查看了我的代码并更改了边距、填充和位置设置，但我无法弄清楚为什么 figcaption 背景在转换时向下移动。

这是我的 HTML 代码:

<figure>
    <img src="images/melon.jpg" alt="melon"></a>
    <figcaption>
        <h3><a href="mywebsite.com">Live Demo or Buy Now</a></h3>
    </figcaption>
</figure>

这是我的CSS

figure {
cursor: pointer;
margin: 0;
overflow: hidden;
position: relative;
float: left;}

figure:hover figcaption {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
bottom: 0;

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}

figure a {
color: white;
text-decoration: none;
}
figcaption {
background-color: rgba(46, 204, 113, .6);
height: 183px;
opacity: 0;
position: absolute;
bottom: -100%;
width: 360px;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: all .4s ease-in;
-moz-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
-ms-transition: all .4s ease-in;
transition: all .4s ease-in;
}
figcaption h3 {
background-color: rgba(0, 0, 0, .4);
font-family: 'Lato', sans-serif;
font-weight: 300px;
left: -100%;
margin: 0;
margin-top: 63px;
padding: 10px 20px;
position: relative;
text-align: center;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
-ms-transition: all .4s;
transition: all .4s;

-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
-ms-transition-delay: .5s;
transition-delay: .5s;
}
figure:hover h3 {
left: 0;}

Answer 1

尝试添加

figure img {
display:block;
}