css - 在 Firefox 中使用 absolute 和 flex 有位置问题

Question

我的 html 标签是这样的，当我使用绝对和 flex 时，我在 Firefox 中遇到问题。我需要<h2>在someBox底部，但它someBox在 Firefox 中浮动。

<div class="leftPointBox">
  <a class="someBox">
    <div class="wrap">
      <picture>
        <source media="(max-width: 414px)" srcset="img/420x315.jpg">
        <source media="(min-width: 413px)" srcset="img/800x600.jpg">
        <img src="img/800x600.jpg" srcset="img/420x315.jpg 414w, img/800x600.jpg 1024w">
      </picture>
    </div>
    <h2>TITLE</h2>
  </a>
</div>

css(scss)：</p>

.someBox {
    position: relative;
    overflow: auto;
}
.leftPointBox{
    width: 380px;
    float: left;

    h2 {
        text-align: left;
        font-weight: 600;
        color: #ffffff;
        font-size: 20px;
        background-color: #004E98;
        position: absolute;
        bottom: 0;
        width: 360px;
        padding: 10px;
        margin-bottom: 0;
    }
}
.someBox .wrap {
    height: 285px;
}

.wrap {
    position: relative;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 10px;
    img {
        max-width: 100%;
        max-height: 100%;
        @media screen and (max-width: 1024px){ flex: inherit; max-width: 100%;}
        }
}

标签： cssfirefoxflexboxabsolute

Answer 1

在某些情况下，浮点数和弹性盒不太喜欢对方。我删除了所有浮动以保持文档流完整，并将 flexbox.wrap从.someBox. 现在，使用align-self您可以将标题放在底部。

我将高度设置.someBox为 600px 只是为了演示标题将位于底部。

.someBox {
  display: flex;
  flex-wrap: wrap;
  height: 600px; /* Demo purpose only */
}

.leftPointBox {
  width: 380px;
}

.leftPointBox h2 {
  text-align: left;
  font-weight: 600;
  color: #ffffff;
  font-size: 20px;
  background-color: #004E98;
  padding: 10px;
  margin-bottom: 0;
  align-self: flex-end;
  width: 100%;
}

.someBox .wrap {
  height: 285px;
}

.wrap {
}

.wrap img {
  max-width: 100%;
  max-height: 100%;
}

<div class="leftPointBox">
  <a class="someBox">
    <div class="wrap">
      <picture>
        <source media="(max-width: 414px)" srcset="https://via.placeholder.com/420x315">
        <source media="(min-width: 413px)" srcset="https://via.placeholder.com/800x600">
        <img src="https://via.placeholder.com/800x600" srcset="https://via.placeholder.com/420x315 414w, https://via.placeholder.com/800x600 1024w">
      </picture>
    </div>
    <h2>TITLE</h2>
  </a>
</div>