web: FlexBox works on Firefox but not on Edge?

mercredi 3 février 2021

FlexBox works on Firefox but not on Edge?

I am working on the footer of a frontend mentor project. The same HTML and CSS produces different pages on Firefox and Edge. The one the Firefox is the correct one. Can you please explain why this is happening ? I have attached the results after the code.

@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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Clipboard</title>
</head>

<body>
  <!-- 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-->
</body>

</html>

Firefox

Edge

I observed that in CSS selctor .col-2 .link if I add -

.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
}
Then Edge also makes the webpage same as Firefox.

WHY ARE THE STYLES
display: flex;
align-items: end;
NOT WORKING ON EDGE

web

mercredi 3 février 2021

FlexBox works on Firefox but not on Edge?

Aucun commentaire:

Enregistrer un commentaire