javascript - flex-box 布局火狐里面出现的问题

Question

想做一个图片下面是遮罩层，遮罩层上面有字的效果，采用flexbox布局以后，其余几个浏览器都没问题，就只有火狐。图片相对定位，文字遮罩层绝对定位，在火狐里就变成了这个样子，请大家帮帮忙

本来是这样子的

下面是代码：
html结构：
<p class="allbooks">

           <figure class="recom-book">
              <img src="images/recom1.png" alt="花千骨">
              <p class="mask">
                 <figcaption>花千骨</figcaption>
                 <p>世上最后一个神，也是百年难得一见的天煞孤</p>
                 <a href="#" class="readmore">阅读更多</a></p>
              </p>
           </figure>

</p>
css代码：

.allbooks {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: box;
}
.recom-book {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  width: 15%;
  margin-top: 30px;
  margin-right: 1rem;
  position: relative;
}
.recom-book:last-child {
  margin-right: 0;
}
.recom-book .mask {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  height: 74px;
  color: #fff;
  font-size: 12px;
  padding-left: 0.3rem;
}
.recom-book img {
  width: 100%;
}
.recom-book figcaption {
  font-size: 16px;
  line-height: 1.56rem;
}
.recom-book a {
  float: right;
  margin-top: 0.5rem;
  color: #fff;

}