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 不兼容所有类型的 browsers.So 我们应该有一个跨浏览器兼容的 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

IE 11
边缘
火狐 22+
Chrome 29+
野生动物园 9+
歌剧 17+
Android 浏览器 4.4+

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

IE 11
边缘
火狐 20+
Chrome 52+
野生动物园 9+
Opera 12.1+
Android 浏览器 5.6+

有用链接：

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

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

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

Flexbox 在移动设备上被忽略

Flexbox ignored on mobile

css

less

flexbox