手机，平板电脑和手机上的Flexbox显示屏问题旧浏览器

Question

我爱一个人能够解释这个问题。从浏览互联网，令人惊讶的是我实际上无法找到解决此问题的详细解决方案。

我所包含的代码显示了使用弹性框的工作显示器。据推测这个问题只发生在弹性盒子上（如果我错了，请纠正我！）。但是，如果您在旧浏览器或某些手机/平板电脑上查看此代码，则显示非常错误。

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

1. 如何修复此问题？
2. 在某处，我可以看到我需要为每个flex（以及其他？）规则添加到我的网站的-webkit或-moz规则列表吗？

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

在Internet Explorer 9上显示问题：



在iPad 4上显示safari上的问题：



＆＃13;
＆＃13;
#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%;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

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

对于iPad4上的Safari（你的第二个屏幕截图），它没有正确分配，是因为space-evenly在所有较新的浏览器上都不完全支持，因此两个圈子都对齐左边。

在下面的示例中，我使用伪元素来创建相同的效果。请注意，如果项目将开始换行，那么使用伪元素的这个技巧将无效。

Stack snippet

#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。

Stack snippet

#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>