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

本来是这样子的

下面是代码：
html结构：

           

              
              

                 
                 
世上最后一个神，也是百年难得一见的天煞孤
                 阅读更多

              

           

.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;

}