html - Flexbox 在手机、平板电脑和旧浏览器上的显示问题

Question

我希望有人能够解释这个问题。环顾互联网，令人惊讶的是我实际上找不到这个问题的详细解决方案或解释。

我包含的代码显示了一个使用 flexbox 的有效显示。大概这个问题只发生在 flex 盒子上(如果我错了，请纠正我!)。但是，如果您在旧浏览器或某些手机/平板电脑上查看此代码，显示会非常错误。

我认为添加 webkit 规则可以解决问题，但它们似乎什么也没做。

1. 如何解决这个问题？
2. 是否可以在某个地方看到我需要为每个 flex(和其他？)规则添加到我的网站的 -webkit 或 -moz 规则列表？

非常感谢这里的任何帮助，谢谢!

在 Internet Explorer 9 上的显示问题:

iPad 4 上的 safari 显示问题:

#wrap-a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: center;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.the-cta-top, .the-cta-bottom {
    display: block;
    font-weight: 300;
    font-size: 16px;
    color: #fff;
}
.the-cta-top a:link, .the-cta-top a:visited, .the-cta-middle a:link, .the-cta-middle a:visited, .the-cta-bottom a:link, .the-cta-bottom a:visited {
    text-decoration: none;
    color: #393939;
}
body {
  height: 1000px;
  width: 100%;
  background: lightgreen
}
.the-cta {
    box-sizing: border-box;
    width: 150px;min-width: 150px;
    height: 150px;
    border: 1px solid #fff;
    margin-top: 30px;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    display: -webkit-inline-flex;
    display: inline-flex;
    border-radius: 50%;
}

<article id="wrap-a">
            <nav onclick="location.href='#';" class="the-cta">
                <span class="the-cta-top">some</span>
                <span class="the-cta-middle"><a href="#">text</a></span>
                <span class="the-cta-bottom">here</span>
            </nav><!--
            --><nav onclick="location.href='#';" class="the-cta">
                <span class="the-cta-top">more</span>
                <span class="the-cta-middle"><a href="#">text</a></span>
                <span class="the-cta-bottom">here</span>
            </nav>
        </article>

Answer 1

IE9 不支持 Flexbox，因此您需要另一种解决方案(最后添加了一个示例)。

当谈到 iPad4 上的 Safari(你的第二张截图)时，它没有正确地间隔它，这是由于 space-evenly 在所有较新的浏览器上都没有完全支持，因此两个圆圈都向左对齐。

在下面的示例中，我使用伪元素来创建相同的效果。但请注意，如果元素开始换行，使用伪元素的这个技巧将不起作用。

堆栈片段

#wrap-a {
  display: -webkit-flex;
  display: flex;
  
  /*  space-evenly is not cross browser supported  */
  /*-webkit-justify-content: space-evenly;  */
  /*justify-content: space-evenly;  */

  /* combine space-between with a pseudo to acheive space-evenly  */
  -webkit-justify-content: space-between;     /*  added  */
  justify-content: space-between;             /*  added  */

  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;                /*  added  */
  align-items: center;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

  /* added pseudo to acheive space-evenly  */
#wrap-a::before, #wrap-a::after {
  content: '';
}

.the-cta-top,
.the-cta-bottom {
  /*display: block;                               not needed  */
  font-weight: 300;
  font-size: 16px;
  color: #fff;
}

.the-cta-top a:link,
.the-cta-top a:visited,
.the-cta-middle a:link,
.the-cta-middle a:visited,
.the-cta-bottom a:link,
.the-cta-bottom a:visited {
  text-decoration: none;
  color: #393939;
}

body {
  height: 1000px;
  /*width: 100%;                                  not needed  */
  background: lightgreen
}

.the-cta {
  box-sizing: border-box;
  width: 150px;
  min-width: 150px;
  height: 150px;
  border: 1px solid #fff;
  margin-top: 30px;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;                /*  added  */
  align-items: center;
  display: -webkit-inline-flex;
  display: inline-flex;
  border-radius: 50%;
}

<article id="wrap-a">
  <nav onclick="location.href='#';" class="the-cta">
    <span class="the-cta-top">some</span>
    <span class="the-cta-middle"><a href="#">text</a></span>
    <span class="the-cta-bottom">here</span>
  </nav>
  <!--
            -->
  <nav onclick="location.href='#';" class="the-cta">
    <span class="the-cta-top">more</span>
    <span class="the-cta-middle"><a href="#">text</a></span>
    <span class="the-cta-bottom">here</span>
  </nav>
</article>

---

已更新，版本适用于 IE9。

堆栈片段

#wrap-a {
}

.the-cta-top,
.the-cta-middle,
.the-cta-bottom {
  display: block;
  font-weight: 300;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.the-cta-top a:link,
.the-cta-top a:visited,
.the-cta-middle a:link,
.the-cta-middle a:visited,
.the-cta-bottom a:link,
.the-cta-bottom a:visited {
  text-decoration: none;
  color: #393939;
}

body {
  height: 1000px;
  background: lightgreen
}

.the-cta {
  display: inline-block;  
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  border: 1px solid #fff;
  margin: 30px 0 0 calc( (100% - 300px) / 3);
  border-radius: 50%;
}

.the-cta > span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

<article id="wrap-a">
  <nav onclick="location.href='#';" class="the-cta">
    <span>
      <span class="the-cta-top">some</span>
      <span class="the-cta-middle"><a href="#">text</a></span>
      <span class="the-cta-bottom">here</span>
    </span>
  </nav><!--
  --><nav onclick="location.href='#';" class="the-cta">
    <span>
      <span class="the-cta-top">some</span>
      <span class="the-cta-middle"><a href="#">text</a></span>
      <span class="the-cta-bottom">here</span>
    </span>
  </nav>
</article>