针对不支持Flexbox的浏览器，是否有CSS Hack及兼容性检测替代方案？

嘿，针对你遇到的安卓原生浏览器和移动Safari的Flexbox兼容问题，确实有几种实用的方法来检测不支持的情况，然后切换到替代样式，下面给你详细拆解：

方法1：用CSS @supports 做特性检测 #

这是最标准、最推荐的方式，专门用来判断浏览器是否支持某个CSS特性。对于Flexbox，你可以先写支持时的样式，再用@supports not来定义 fallback 样式：

/* 先写支持Flexbox的正常样式 */
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 当浏览器不支持标准flex时，加载这些替代样式 */
@supports not (display: flex) {
  .flex-container {
    display: block;
    overflow: hidden;
  }
  .flex-container .item {
    float: left;
    width: 33%;
    /* 这里可以根据需求用inline-block、定位等传统布局方式 */
  }
}

不过要注意：非常老的浏览器（比如安卓原生4.3及更早版本）本身不支持@supports规则，这时候就需要结合其他方法兜底。

方法2：针对特定旧浏览器的CSS Hack #

就像你提到的IE专属hack一样，针对旧版安卓原生浏览器和移动Safari，也有对应的定向写法：

• 旧版安卓原生浏览器（4.3及以下）：这类浏览器基于老WebKit内核，可能只支持带前缀的Flexbox（display:-webkit-box），甚至完全不兼容标准flex。可以用这个媒体查询来定位：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* 用:not(:root)来区分现代WebKit和老版本 */
  .flex-container:not(:root) {
    display: block;
    text-align: center;
  }
  .flex-container:not(:root) .item {
    display: inline-block;
    vertical-align: middle;
  }
}

• 旧版移动Safari（iOS 7及以下）：可以用这个专属的hack来定向：

/* 仅对iOS7及以下的Safari生效 */
@media screen and (min-width: 0px) and (min-height: 0px) {
  _::-webkit-full-page-media, _:future, :root .flex-container {
    display: block;
    /* 这里写你的兼容布局样式 */
  }
}

方法3：JavaScript检测 + 动态添加类名 #

如果CSS层面的检测不够灵活，你可以用JS来判断浏览器是否支持Flexbox，然后给根元素加一个标识类，再写对应的样式：

// 检测是否支持标准Flexbox，也可以扩展检测前缀版本
function supportsFlexbox() {
  const style = document.documentElement.style;
  return 'flex' in style || '-webkit-flex' in style || '-moz-box' in style;
}

// 如果不支持，给html标签加个no-flexbox类
if (!supportsFlexbox()) {
  document.documentElement.classList.add('no-flexbox');
}

然后在CSS里就可以这样写：

/* 支持Flexbox时的样式 */
.flex-container {
  display: flex;
  gap: 1rem;
}

/* 不支持时的替代样式 */
.no-flexbox .flex-container {
  display: block;
  margin-bottom: 1rem;
}
.no-flexbox .flex-container .item {
  margin-bottom: 1rem;
}

小建议 #

优先组合使用@supports和JS检测：@supports覆盖支持它的现代浏览器，JS检测则兜底那些不支持@supports的旧浏览器，CSS hack作为最后针对极端旧版本的补充。这样既能保证标准性，又能覆盖大部分兼容场景。

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