Flexbox无法在Firefox上正常使用

时间：2019-03-16 23:34:10

标签： html css css3 firefox flexbox

在Chrome上，flexbox使页面的主体在页面上垂直居中。但是，在firefox上，页面并未垂直居中，所有内容都尽可能移到页面顶部，这可以在下面的图片和codepen中看到。

Firefox： 不起作用 https://imgur.com/a/is880mp

Chrome 正常工作 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 个答案:

答案 0 :(得分：1)

您需要在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元素将偏离中心。

此处有完整的说明和解决方案：Center and bottom-align flex items

大多数浏览器都带有default margin on the body element。通常是8px。

body { margin: 8px; }

当body元素设置为100％高度时，这通常会启动垂直滚动条。要消除溢出，只需使用以下命令覆盖默认值即可：

body { margin: 0; }
相关问题
最新问题