我爱一个人能够解释这个问题。从浏览互联网,令人惊讶的是我实际上无法找到解决此问题的详细解决方案。
我所包含的代码显示了使用弹性框的工作显示器。据推测这个问题只发生在弹性盒子上(如果我错了,请纠正我!)。但是,如果您在旧浏览器或某些手机/平板电脑上查看此代码,则显示非常错误。
我认为添加webkit规则可以解决问题,但它们似乎什么都不做。
非常感谢这里的任何帮助,谢谢!
在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>
&#13;
答案 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>