Firefox 和基于 Chromium 的浏览器的布局完全不同

Question

我正在为一个学校项目开发一个网站，我注意到我在基于 chromium 的浏览器中创建和测试的布局在 Firefox 中查看时完全被破坏了。

项目本身是用 svelte 编写的，但我将奇怪的行为部分提取到代码笔中：

https://codepen.io/0324bence/pen/MYgeZwj

HTML：

<div style="display: contents">
  <div id="window-container" on:click="{closeMenu}">
    <div id="header">
      <a href="/" id="logo-container">
        <div class="container" style="aspect-ratio: 290 / 136">
          <svg viewBox="0 0 290 136" xmlns="http://www.w3.org/2000/svg">
            /*SVG code in codepen*/
          </svg>
        </div>
      </a>
      <div id="center-container">
        <form>
          <input type="text" placeholder="Keresés..." />
          <button type="submit">
            <div class="container" style="aspect-ratio: 32 / 32">
              <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                /*SVG code in codepen*/
              </svg>
            </div>
          </button>
        </form>
      </div>
      <div id="right-container">
        <div class="container" style="aspect-ratio: 100 / 90">
          <svg viewBox="0 0 100 90" fill="none" xmlns="http://www.w3.org/2000/svg">
            /*SVG code in codepen*/
          </svg>
        </div>

        <button id="user-button">
          <div class="container" style="aspect-ratio: 100 / 100">
            <img src="https://i.imgur.com/YsYybca.png" alt="User profile icon" />
          </div>
        </button>
        <div id="user-menu" class="hidden">
          <a href="/profile" class="menu-item">Profil</a>
          <a href="/advert/create" class="menu-item">Új hirdetés</a>
          <a href="/auth/logout" class="menu-item" data-sveltekit-reload>Kijelentkezés</a>
        </div>
      </div>
    </div>
    <div id="content">
      <slot />
    </div>
  </div>
</div>

SCSS：

@import "https://fonts.googleapis.com/css2?family=Open+Sans&display=swap";
@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";

$color-white: #ffffff;
$color-black: #000000;
$color-red: #ca2918;
$color-light-blue: #95c2e4;
$color-blue: #2b84c9;
$color-dark-blue: #164265;

//global
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: $color-white;
  color: $color-black;
  font-family: "Open Sans", sans-serif;
}

a {
  color: hsl(240, 100%, 80%);
  &:visited {
    color: hsl(240, 100%, 60%);
  }
  &:hover {
    color: hsl(240, 100%, 70%);
  }
}

//svg stuff
.light-blue {
  fill: #95c2e4;
}

.dark-blue {
  fill: #164265;
}

.black {
  fill: #000000;
}

.container {
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}

//main
#window-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

#header {
  width: 100%;
  z-index: 2;
  height: 7rem;
  padding: 1rem 2rem 1rem 2rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  background-color: $color-blue;
  position: relative;

  #logo-container {
    height: 100%;
    display: block;
  }

  #center-container {
    flex: 1;
    height: 100%;

    form {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
    }

    input {
      flex: 1;
    }

    input,
    button {
      padding: 0.5rem;
      border-radius: 15px;
      border: 1px solid $color-dark-blue;
      font-size: 1.2rem;
      outline: none;
    }

    button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 2.5rem;
      width: 2.5rem;
    }
  }

  #right-container {
    display: flex;
    gap: 2rem;
    height: 100%;
    padding: 0.7rem;

    button {
      background: none;
      border: none;
      cursor: pointer;
    }

    #user-menu {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: stretch;
      z-index: -1;
      top: 100%;
      right: 0;
      background-color: $color-dark-blue;
      border: 1px solid $color-dark-blue;
      width: 20rem;
      pointer-events: all;
      transition: transform 0.3s;
      // transform: translateY(0%);
      visibility: visible;

      &.hidden {
        // transform: translateY(-100%);
        pointer-events: none;
        display: none;
        // visibility: hidden;
      }

      .menu-item {
        background-color: $color-white;
        padding: 0.5rem;
        display: flex;
        align-items: center;

        color: $color-black;
        font-size: 1.2rem;

        text-decoration: none;

        cursor: pointer;

        &:hover {
          background-color: darken($color-white, 10%);
        }
      }
    }
  }
}

打字稿

let menuState = false;

const windowContainer = document.getElementById("window-container")!;

const userButton = document.getElementById("user-button")!;

const userMenu = document.getElementById("user-menu")!;

userButton.addEventListener("click", e => {
    e.stopPropagation();
    userMenu.classList.toggle("hidden");
});

windowContainer.addEventListener("click", () => {
    if (menuState) userMenu.classList.add("hidden");
});

这是我的具体问题的图片：

基于 chromium 的浏览器中的布局（正如其预期）：

Firefox 中的布局（已损坏）：

如有任何帮助，我们将不胜感激！

Answer 1

出现这个问题是因为 a#logo-container 不继承其使用的子 div.container 的大小

aspect-ratio.

在 Firefox 中，单独的宽高比不会将其计算出的大小传播到 DOM 层次结构。

要解决此问题，您应该显式定义

a#logo-container.

的大小，您可以通过应用相同的

aspect-ratio

属性并确保父级具有适当的宽度或高度来计算。例如：

<a href="/" id="logo-container" style="aspect-ratio: 290 / 136; display: block;">
  <div class="container" style="aspect-ratio: 290 / 136">
    <svg viewBox="0 0 290 136" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG code -->
    </svg>
  </div>
</a>

添加

display: block;

确保

<a>

元素表现为块级元素，这是正确应用宽高比所必需的。如果没有这个，像

<a>

这样的内联元素将不会尊重宽高比。