Flexbox 在移动设备上被忽略

Question

我使用 flexbox 将页脚导航中的列表项分布在页脚的宽度上。

它在我的浏览器和 Chrome 的移动仿真中正确显示。但是，它在我测试过的任何移动设备（iPhone、iPad、三星平板电脑）上都会被忽略。

有没有人看到我不知道的代码有什么明显的错误？下面是我正在使用的 CSS/LESS 片段。

ul {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 0;

   li {
      padding: 0;
   }
}

Answer 1

这是因为display:flex&justify-content: space-between在所有类型的浏览器中都不兼容。所以我们应该有一个跨浏览器兼容的 CSS，如下所示：

ul {

  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-between; 
  justify-content: space-between; 

   width: 100%;
   padding: 0;

   li {
      padding: 0;
   }
}

浏览器支持 display:flex

• 浏览器 11
• 边缘
• 火狐 22+
• 铬 29+
• Safari 9+
• 歌剧 17+
• 安卓浏览器 4.4+

浏览器支持 justify-content: space-between

• 浏览器 11
• 边缘
• 火狐 20+
• 铬 52+
• Safari 9+
• 歌剧 12.1+
• 安卓浏览器 5.6+

有用的链接：

https://caniuse.com/#feat=flexbox

https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context

https://css-tricks.com/using-flexbox/