Flexbox可以在Firefox上运行，但不能在Edge上运行吗？

debugcn 发表于 Dev

乌伊瓦尔·萨克森纳

我正在从事前端导师项目的页脚。相同的HTML和CSS在Firefox和Edge上生成不同的页面。Firefox是正确的一种。你能解释为什么会这样吗？我在代码后附加了结果。

@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap");
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-family: "Bai Jamjuree", sans-serif;
  color: #9fabb2;
}

p.medium {
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 1000px) {
  p.medium {
    font-size: 1.125rem;
    line-height: 1.75;
  }
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  background-color: #f6f7f9;
  margin-top: calc(100vh - 150px);
}

footer .footer_logo {
  height: 57px;
  width: 57px;
}

footer .footer {
  height: 150px;
}

footer .footer__container {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  max-width: 1110px;
  margin: auto;
}

footer .col-1 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .col-3 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .col-3 img {
  margin-right: 24px;
}

.col-2 {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.col-2 .link {
  border: 1px solid blue;
  display: flex;
  align-items: end;
  display: -webkit-box;
  -webkit-box-align: end;
}

.col-2 a {
  border: 1px solid green;
}

<!-- Footer -->
<footer>
  <div class="footer footer__container">
    <div class="col-1">
      <img class="footer_logo" src="logo.svg">
    </div>
    <div class="col-2">
      <div class="link">
        <a href="#">FAQs</a>
      </div>
      <div class="link">
        <a href="#">Privacy Policy</a>
      </div>
      <div class="link">
        <a href="#">Install Guide</a>
      </div>
      <div class="link">
        <a href="#"></a>
        <!--This is supposed to be empty-->
      </div>
      <div class="link">
        <a href="#">Conatct Us</a>
      </div>
      <div class="link">
        <a href="#">Press Kit</a>
      </div>
    </div>
    <div class="col-3">
      <img src="icon-facebook.svg">
      <img src="icon-twitter.svg">
      <img src="icon-instagram.svg">
    </div>
  </div>
</footer>
<!-- Footer Ends-->

火狐浏览器

边缘

我在CSS selctor中观察到，.col-2 .link如果添加：

.col-2 .link {
  border: 1px solid blue;
  display: flex;
  align-items: end;
  display: -webkit-box;      <------------   *THIS LINE AND*
  -webkit-box-align: end;    <------------   *THIS LINE HERE* 
}

然后，Edge也使网页与Firefox相同。

为什么是样式

display: flex;
align-items: end;

不在边缘工作

迈克尔·本杰明

归结为：align-items: endFirefox支持，但Edge不支持。

您仍然需要使用align-items: flex-end完整的跨浏览器支持。

这是有问题的代码块：

.col-2 .link {
  border: 1px solid blue;
  display: flex;
  align-items: end;
  display: -webkit-box;
  -webkit-box-align: end;
}

In a declaration block, the cascade will pick the last property, when the property is declared multiple times.

So display: flex is ignored because the cascade will settle on display: -webkit-box.

For cross axis alignment, -webkit-box-align: end works in both Firefox and Edge.

No prefixes are needed. Both Firefox and Edge support Flex Layout.

The problem is actually quite simple to fix, and it has nothing to do with prefixes.

align-items: end is supported by Firefox, but not Edge.
You still need to use align-items: flex-end for full cross-browser support.

该end值是CSS Box Alignment Module的功能，主要浏览器尚未完全支持。因此，请使用CSS弹性盒布局模块中flex-end定义的特定值。带有前缀“ flex-”的值最终将被淘汰，但目前显然仍然有必要。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-7

我来说两句

0条评论

登录后参与评论

来自分类Dev