Flexbox div 在 Chrome 和 Firefox 中的拉伸不同

Question

我遇到了一个奇怪的问题，我有一个 div 包裹另一个 div，结构如下：

<div class="col-md-4 view small_img">
    <div class="blue"></div>
</div>

我希望当我将鼠标悬停在div.small_img 上时，黑色块会覆盖在蓝色块上，因此我将其设置为:after 并使用flexbox 和定位。

在 Chrome 中一切看起来都很棒，但是当我切换到 Firefox 时，我不知道为什么那个背景没有覆盖在我的蓝色块上，而只是在它旁边显示了一个小方块。

.small_img {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small_img:hover:before,
.small_img:hover:after {
  content: '';
  position: absolute;
}
.small_img:hover:before {
  content: 'view';
  border: 2px solid hsl(0, 0%, 100%);
  border-radius: 10px;
  line-height: 2em;
  padding: 5px;
  color: white;
  z-index: 5;
}
.small_img:hover:after {
  width: 92.5%;
  height: 92.5%;
  background: hsla(0, 0%, 0%, 0.85);
}
.small_img img {
  height: 100%;
}
.blue {
  background: hsl(220, 100%, 60%);
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

<div id="page-wrapper">
  <div class="row">
    <h1 class="page-header center">flexbox hover cover effect</h1>
    <h4 class="center">I want black block cover my blue block</h4>
    <!-- main Content -->
    <div class="row col-md-offset-1 col-md-10">
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
    </div>
  </div>
</div>

有人知道发生了什么吗？

也包括我的jsfiddle。

Answer 1

您可以修复此问题，方法是设置 .small_img:hover:after 的 top 和 left - 请参阅下面的演示和 updated fiddle here。

.small_img {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small_img:hover:before,
.small_img:hover:after {
  content: '';
  position: absolute;
}
.small_img:hover:before {
  content: 'view';
  border: 2px solid hsl(0, 0%, 100%);
  border-radius: 10px;
  line-height: 2em;
  padding: 5px;
  color: white;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.small_img:hover:after {
  width: 92.5%;
  height: 92.5%;
  background: hsla(0, 0%, 0%, 0.85);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.small_img img {
  height: 100%;
}
.blue {
  background: hsl(220, 100%, 60%);
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

<div id="page-wrapper">
  <div class="row">
    <h1 class="page-header center">flexbox hover cover effect</h1>
    <h4 class="center">I want black block cover my blue block</h4>
    <!-- main Content -->
    <div class="row col-md-offset-1 col-md-10">
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
    </div>
  </div>
</div>