收藏
回答

flex布局在iphone6样式错乱

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 Bug iOS ios 10.1.1 iphone6 7.0.3

在其他手机样式都正常,在iphone6就样式错乱,使用

-webkit-兼容也无效


最后一次编辑于  07-31
回答关注问题邀请回答
收藏

2 个回答

  • 潮级胖
    潮级胖
    09-23

    请问解决了吗,我也遇到这个问题了

    09-23
    赞同
    回复 1
    • Liar
      Liar
      09-23
      解决了, display: -webkit-flex; display: flex; display: -webkit-box;用这个兼容
      09-23
      回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    07-31

    iPhone 6手机系统是10以下的吧?

    07-31
    赞同
    回复 7
    • Liar
      Liar
      07-31
      ios10.1.1出现的,更低版本也有
      07-31
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      07-31
      高版本应该不会出现。
      07-31
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      07-31

      那建议你做下兼容:


      07-31
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      07-31

      flex布局分为旧版本dispaly: box;过渡版本dispaly: flex box;以及现在的标准版本display: flex;

      Android

           2.3 开始就支持旧版本display:-webkit-box;

           4.4 开始支持标准版本display: flex;

      IOS

           6.1 开始支持旧版本display:-webkit-box;

           7.1 开始支持标准版本display: flex;

      PC

            ie10开始支持,但是IE10的是-ms形式的

      二、解决

      注意:把旧语法写在底下(ps:css向下兼容),否则无效


      盒子写法

      display:-webkit-flex;      /* 新版本语法: Chrome 21+ */

      display:flex;                  /* 新版本语法: Opera 12.1, Firefox 22+ */

      display:-webkit-box;    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */


      子元素写法

      /-webkit-box-flex:1  /* OLD - iOS 6-, Safari 3.1-6 */


      07-31
      回复
    • Liar
      Liar
      08-01回复仙森ღ₅₂₀¹³¹⁴
      加了还是无效,样式还是乱的https://developers.weixin.qq.com/s/RK3xMim47Tar
      08-01
      回复
    查看更多(2)