Html CSS效果在Firefox中不可见

将鼠标悬停在图像上时，图像表面将变为灰色，并显示文本。这种效果在chrome和safari中都可以使用，但当我在Mozilla Firefox中试用时，灰色区域仅在左上角显示为一个小方形框。我不知道为什么，希望这里有人能找出问题的原因

这是我使用的CSS。如您所见，我添加了moz转换

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

---

你有2个

span.text内容
css样式的原因吗？一定是在复制/粘贴时错误添加的。我现在已经编辑了。你试过使用div吗？当你删除
-moz转换时会发生什么：不透明度500ms
在我的FF版本（最新）
transition
使用前缀。你能添加一些html代码或小提琴吗？试着添加
opacity:1！重要的至
ul.img-list li:悬停span.text-content