Flexbox не работает должным образом с Firefox - PullRequest
Новая
       27

Flexbox не работает должным образом с Firefox

2 голосов
/ 17 марта 2019

В Chrome flexbox сохраняет тело страницы вертикально по центру страницы.Однако в Firefox страница не центрирована по вертикали, и весь контент перемещается как можно дальше в верхнюю часть страницы, что видно на рисунке и в коде ручки ниже.

Firefox: не работает https://imgur.com/a/is880mp

Хром работает https://imgur.com/a/2N6bXSF

Пример проблемы: https://codepen.io/robbyjm/pen/PLeQVY?

html {
  background-color: #f7f7f7;
  font-family: interstate-mono, monospace;
  font-weight: 400;
  font-style: normal;
}

html body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

html body main {
  display: flex;
  flex-direction: column;
}

html body main .weather-nav {
  display: flex;
}

html body main .weather-nav .weather {
  text-align: center;
}

html body main form {
  margin: 1em auto !important;
  height: 45px;
  width: 490px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}

html body main form input[type="search"] {
  width: inherit;
  height: inherit;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.75em;
  border-width: 0;
  font-size: 1.1em;
  font-family: interstate-mono, monospace !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

html body main form input[type="search"]:focus {
  outline: none;
}

html body main nav {
  display: flex;
  justify-content: center;
}

html body main nav .bookmark-group {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding-right: 2em;
}

html body main nav .bookmark-group hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

html body main nav .bookmark {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

html body main nav .bookmark hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

html body main nav .bookmark li {
  display: inline;
  padding-right: 0.8em;
}

html body main nav .bookmark li a {
  color: black;
  text-decoration: none;
}

footer {
  display: flex;
  align-self: flex-end;
}

#stack {
  color: #f48024;
  font-weight: 400;
}

#git {
  color: #24292e;
  font-weight: 400;
}

#java {
  color: #467899;
  font-weight: 400;
}

#python {
  color: #467899;
  font-weight: 400;
}

#aws {
  color: #ec912d;
  font-weight: 400;
}

#nest {
  color: #aa253a;
  font-weight: 400;
}

#hs {
  color: #fece41;
  font-weight: 400;
}

#dw {
  color: #b30939;
  font-weight: 400;
}

#canvas {
  color: #9e1b32;
  font-weight: 400;
}

#waze {
  color: #85d5ea;
  font-weight: 400;
}

#yt {
  color: red;
  font-weight: 400;
}

#reddit {
  color: #ff4500;
  font-weight: 400;
}

#rd {
  color: silver;
  font-weight: 400;
}

#dayz {
  color: #292929;
  font-weight: 400;
}

#google {
  color: #1da362;
  font-weight: 400;
}

#mf {
  color: #0e2866;
  font-weight: 400;
}

#eye {
  color: #36393e;
  font-weight: 400;
}

#vim {
  color: navy;
  font-weight: 400;
}

#react {
  color: #61dafb;
  font-weight: 400;
}

#js {
  color: #f5f9fa;
  font-weight: 400;
}

#ct {
  color: #ff9800;
  font-weight: 400;
}

#bttn {
  color: #fffde7;
  font-weight: 400;
}

#animate {
  color: #7b8993;
  font-weight: 400;
}
<html>

<head>
  <script src="weather.js" type="text/javascript"></script>
  <script src="bitcoin.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://use.typekit.net/cnw4ewi.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>startpage</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <main>
    <div class="weather-nav">
      <form action="https://duckduckgo.com/?q=" method="GET">
        <input type="search" name="q" placeholder=" welcome back" autoFocus></input>
      </form>
      <div class="weather">
        <div id="u"></div>
        <div id="t"></div>
      </div>
    </div>
    <nav>
      <ul class="bookmark-group">
        <li>dev</li>
        <hr>
        <li>social</li>
        <hr>
        <li>storage</li>
        <hr>
        <li>web</li>
      </ul>
      <ul class="bookmark">
        <li><a href="https://www.stackexchange.com"><span id="stack">[</span>Exchange<span id="stack">]</span></a></li>
        <li><a href="https://www.github.com/robbyjm"><span id="git">[</span>GitHub<span id="git">]</span></a></li>
        <li><a href="https://www.ruby-lang.org/en/"><span id="dw">[</span>Ruby<span
                    id="dw">]</span></a></li>
        <li><a href="https://docs.oracle.com/javase/tutorial/"><span id="java">[</span>Java<span id="java">]</span></a></li>
        <li><a href="https://docs.python.org/3/tutorial/index.html"><span id="python">[</span>Python<span id="python">]</span></a></li>
        <li><a href="https://gist.github.com"><span id="git">[</span>Gist<span id="git">]</span></a></li>
        <li><a href="https://aws.amazon.com"><span id="aws">[</span>AWS<span id="aws">]</span></a></li>
        <hr>
        <li><a href="https://www.waze.com/livemap"><span id="waze">[</span>Waze<span id="waze">]</span></a></li>
        <li><a href="https://www.youtube.com"><span id="yt">[</span>YouTube<span id="yt">]</span></a></li>
        <li><a href="https://www.reddit.com"><span id="reddit">[</span>Reddit<span id="reddit">]</span></a></li>
        <li><a href="https://www.yelp.com/"><span id="rd">[</span>Yelp<span id="rd">]</span></a></li>
        <li><a href="https://mail.tutanota.com/login"><span id="dayz">[</span>Tutanota<span id="dayz">]</span></a></li>
        <hr>
        <li><a href="https://drive.google.com"><span id="google">[</span>GoogleDrive<span id="google">]</span></a></li>
        <li><a href="https://mixtape.moe/"><span id="mf">[</span>M.Moe<span id="mf">]</span></a></li>
        <li><a href="https://the-eye.eu/"><span id="eye">[</span>TheEye<span id="eye">]</span></a></li>
        <li><a href="https://vimm.net/?p=vault"><span id="vim">[</span>Vimms<span id="vim">]</span></a></li>
        <hr>
        <li><a href="https://reactjs.org/"><span id="react">[</span>ReactJS<span id="react">]</span></a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript"><span
                            id="java">[</span>JS<span id="java">]</span></a></li>
        <li><a href="https://css-tricks.com/"><span id="ct">[</span>CssTricks<span id="ct">]</span></a></li>
        <li><a href="https://developer.mozilla.org/en-US/"><span id="mdn">[</span>MDN<span id="mdn">]</span></a></li>
        <li><a href="https://bttn.surge.sh/"><span id="animate">[</span>Bttn<span id="animate">]</span></a></li>
        <li><a href="https://daneden.github.io/animate.css/"><span id="animate">[</span>Animate<span id="animate">]</span></a></li>
        <br>
      </ul>
    </nav>
  </main>
  <footer>
    <div id="s"></div>
  </footer>
</body>

</html>

1 Ответ

1 голос
/ 17 марта 2019

Вам нужно height: 100vh на элементе body.Затем, чтобы предотвратить вертикальную полосу прокрутки, переопределите поля по умолчанию с помощью margin: 0. 

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;  /* NEW */
  margin: 0;  /* NEW */
}


html {
  background-color: #f7f7f7;
  font-family: interstate-mono, monospace;
  font-weight: 400;
  font-style: normal;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;  /* NEW */
  margin: 0;  /* NEW */
}

main {
  display: flex;
  flex-direction: column;
}

.weather-nav {
  display: flex;
}

.weather {
  text-align: center;
}

main form {
  margin: 1em auto !important;
  height: 45px;
  width: 490px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}

main form input[type="search"] {
  width: inherit;
  height: inherit;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.75em;
  border-width: 0;
  font-size: 1.1em;
  font-family: interstate-mono, monospace !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

main form input[type="search"]:focus {
  outline: none;
}

main nav {
  display: flex;
  justify-content: center;
}

main nav .bookmark-group {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding-right: 2em;
}

main nav .bookmark-group hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

main nav .bookmark {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

main nav .bookmark hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

main nav .bookmark li {
  display: inline;
  padding-right: 0.8em;
}

main nav .bookmark li a {
  color: black;
  text-decoration: none;
}

footer {
  display: flex;
  align-self: flex-end;
}

#stack {
  color: #f48024;
  font-weight: 400;
}

#git {
  color: #24292e;
  font-weight: 400;
}

#java {
  color: #467899;
  font-weight: 400;
}

#python {
  color: #467899;
  font-weight: 400;
}

#aws {
  color: #ec912d;
  font-weight: 400;
}

#nest {
  color: #aa253a;
  font-weight: 400;
}

#hs {
  color: #fece41;
  font-weight: 400;
}

#dw {
  color: #b30939;
  font-weight: 400;
}

#canvas {
  color: #9e1b32;
  font-weight: 400;
}

#waze {
  color: #85d5ea;
  font-weight: 400;
}

#yt {
  color: red;
  font-weight: 400;
}

#reddit {
  color: #ff4500;
  font-weight: 400;
}

#rd {
  color: silver;
  font-weight: 400;
}

#dayz {
  color: #292929;
  font-weight: 400;
}

#google {
  color: #1da362;
  font-weight: 400;
}

#mf {
  color: #0e2866;
  font-weight: 400;
}

#eye {
  color: #36393e;
  font-weight: 400;
}

#vim {
  color: navy;
  font-weight: 400;
}

#react {
  color: #61dafb;
  font-weight: 400;
}

#js {
  color: #f5f9fa;
  font-weight: 400;
}

#ct {
  color: #ff9800;
  font-weight: 400;
}

#bttn {
  color: #fffde7;
  font-weight: 400;
}

#animate {
  color: #7b8993;
  font-weight: 400;
}
<header></header>
<main>
  <div class="weather-nav">
    <form action="https://duckduckgo.com/?q=" method="GET">
      <input type="search" name="q" placeholder=" welcome back" autoFocus></input>
    </form>
    <div class="weather">
      <div id="u"></div>
      <div id="t"></div>
    </div>
  </div>
  <nav>
    <ul class="bookmark-group">
      <li>dev</li>
      <hr>
      <li>social</li>
      <hr>
      <li>storage</li>
      <hr>
      <li>web</li>
    </ul>
    <ul class="bookmark">
      <li><a href="https://www.stackexchange.com"><span id="stack">[</span>Exchange<span id="stack">]</span></a></li>
      <li><a href="https://www.github.com/robbyjm"><span id="git">[</span>GitHub<span id="git">]</span></a></li>
      <li><a href="https://www.ruby-lang.org/en/"><span id="dw">[</span>Ruby<span
                    id="dw">]</span></a></li>
      <li><a href="https://docs.oracle.com/javase/tutorial/"><span id="java">[</span>Java<span id="java">]</span></a></li>
      <li><a href="https://docs.python.org/3/tutorial/index.html"><span id="python">[</span>Python<span id="python">]</span></a></li>
      <li><a href="https://gist.github.com"><span id="git">[</span>Gist<span id="git">]</span></a></li>
      <li><a href="https://aws.amazon.com"><span id="aws">[</span>AWS<span id="aws">]</span></a></li>
      <hr>
      <li><a href="https://www.waze.com/livemap"><span id="waze">[</span>Waze<span id="waze">]</span></a></li>
      <li><a href="https://www.youtube.com"><span id="yt">[</span>YouTube<span id="yt">]</span></a></li>
      <li><a href="https://www.reddit.com"><span id="reddit">[</span>Reddit<span id="reddit">]</span></a></li>
      <li><a href="https://www.yelp.com/"><span id="rd">[</span>Yelp<span id="rd">]</span></a></li>
      <li><a href="https://mail.tutanota.com/login"><span id="dayz">[</span>Tutanota<span id="dayz">]</span></a></li>
      <hr>
      <li><a href="https://drive.google.com"><span id="google">[</span>GoogleDrive<span id="google">]</span></a></li>
      <li><a href="https://mixtape.moe/"><span id="mf">[</span>M.Moe<span id="mf">]</span></a></li>
      <li><a href="https://the-eye.eu/"><span id="eye">[</span>TheEye<span id="eye">]</span></a></li>
      <li><a href="https://vimm.net/?p=vault"><span id="vim">[</span>Vimms<span id="vim">]</span></a></li>
      <hr>
      <li><a href="https://reactjs.org/"><span id="react">[</span>ReactJS<span id="react">]</span></a></li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript"><span
                            id="java">[</span>JS<span id="java">]</span></a></li>
      <li><a href="https://css-tricks.com/"><span id="ct">[</span>CssTricks<span id="ct">]</span></a></li>
      <li><a href="https://developer.mozilla.org/en-US/"><span id="mdn">[</span>MDN<span id="mdn">]</span></a></li>
      <li><a href="https://bttn.surge.sh/"><span id="animate">[</span>Bttn<span id="animate">]</span></a></li>
      <li><a href="https://daneden.github.io/animate.css/"><span id="animate">[</span>Animate<span id="animate">]</span></a></li>
      <br>
    </ul>
  </nav>
</main>
<footer>
  <div id="s"></div>
</footer>

Обратите внимание, что вы вертикально центрируете элемент main с помощью justify-content: space-between.Таким образом, элемент центрируется на странице только потому, что header и footer имеют одинаковую высоту (0px).Однако, как только верхний и нижний колонтитулы растут, если они имеют различную высоту, элемент main будет смещен от центра.

Полное объяснение и решения здесь: Гибкие элементы по центру и снизу

Большинство браузеров поставляются с по умолчанию margin для элемента body .Обычно это 8px. 

body { margin: 8px; }

Это часто вызывает вертикальную полосу прокрутки, когда элемент body установлен на 100% высоты.Чтобы удалить переполнение, просто переопределите значение по умолчанию: 

body { margin: 0; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...