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

时间:2018-01-21 12:16:39

标签: html css css3 flexbox

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

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

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

  1. 如何修复此问题?
  2. 在某处,我可以看到我需要为每个flex(以及其他?)规则添加到我的网站的-webkit或-moz规则列表吗?
  3. 非常感谢这里的任何帮助,谢谢!

    在Internet Explorer 9上显示问题:

    i.e.9

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

    enter image description here

    
    
    #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>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:2)

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>