移动端、平板及旧浏览器中Flexbox布局显示问题排查与解决

嘿，我来帮你搞定这个Flexbox兼容问题——你遇到的其实是新旧Flexbox语法不匹配和完全不支持Flex的浏览器的双重坑，咱们一步步拆解解决：

一、问题根源 #

• IE9：完全不支持任何版本的Flexbox，所以你加再多前缀也没用，它根本识别不了Flex相关的属性。
• iPad4的Safari：它搭载的是iOS 7或8版本的Safari，只支持2012年的旧版Flexbox语法（带-webkit-前缀，但属性名和现在的标准语法差异极大），你现在写的是标准语法的前缀，老浏览器完全不认。

二、针对性修复方案 #

1. IE9的降级处理

因为IE9完全不支持Flexbox，有两个实用方案：

• 方案A：单独写IE9专属布局：用IE条件注释给IE9加载非Flex的样式（比如inline-block+text-align），直接替换Flex布局：

<!--[if IE 9]>
<style>
#wrap-a {
  text-align: center; /* 让子元素居中 */
  padding: 0 20px;
}
.the-cta {
  display: inline-block;
  vertical-align: middle;
  margin: 30px 15px 0; /* 模拟均匀间距 */
}
</style>
<![endif]-->

• 方案B：忽略低版本（如果访问量极低）：如果IE9的用户占比可以忽略，也可以用@supports (display: flex)给支持Flex的浏览器加载样式，不过条件注释是IE9最可靠的处理方式。

2. iPad4 Safari的旧版Flex语法适配

你需要在现有代码基础上，添加2012版的-webkit前缀属性，核心的语法对应关系我整理在下面，然后直接给你修改好的兼容代码：

注意：旧版语法里没有space-evenly这个属性，我们可以用「容器伪元素+-webkit-box-pack: justify」来模拟均匀间距的效果。

修改后的完整兼容代码：

#wrap-a {
  /* 旧版webkit Flex语法（适配iPad4 Safari） */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: justify;
  -webkit-box-lines: multiple;
  /* 标准Flex语法（现代浏览器） */
  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;
  /* 模拟space-evenly的适配 */
  padding: 0 10px;
}
/* 伪元素模拟space-evenly的左右占位 */
#wrap-a::before, #wrap-a::after {
  content: "";
  display: block;
  -webkit-box-flex: 1;
  flex: 1;
}

.the-cta {
  box-sizing: border-box;
  width: 150px;
  min-width: 150px;
  height: 150px;
  border: 1px solid #fff;
  margin-top: 30px;
  margin-left: 10px;
  margin-right: 10px;
  /* 旧版webkit Flex语法 */
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* 标准Flex语法 */
  -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%;
}

/* 以下原有样式保持不变 */
.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
}

对应的HTML部分不需要修改，保持你原来的结构即可。

三、常用CSS属性前缀参考（Flexbox及通用） #

这里整理了日常开发常用的前缀兼容列表，你可以存下来备用：

• Flexbox相关：
  • 旧版webkit（iOS 8及以前）：-webkit-box、-webkit-box-orient、-webkit-box-pack、-webkit-box-align、-webkit-box-flex
  • 过渡版webkit/火狐：-webkit-flex、-webkit-flex-direction、-moz-flex、-moz-flex-direction
• 通用CSS属性：
  • 圆角：-webkit-border-radius、-moz-border-radius
  • 盒模型：-webkit-box-sizing、-moz-box-sizing
  • 过渡动画：-webkit-transition、-moz-transition
  • 变换：-webkit-transform、-moz-transform
  • 渐变：-webkit-linear-gradient、-moz-linear-gradient

内容的提问来源于stack exchange，提问作者user8758206