弹性盒模型在iPhone上兼容性问题
发布于 5 年前 作者 yancai 2748 次浏览 来自 问答

手机信息:

iPhone版本:10.3.3

型号: iPhone SE

浏览器信息:

微信开发者工具: v1.01.1711160

demo.wxml

<view class="flex flex-v">
    <view class="flex-item">test item</view>
    <view class="flex-item">text item</view>
</view>

demo.wxss

.flex {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-v {
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column; 
  flex-direction:column;
}
.flex-item {
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  display: inline-block;
  margin: 0 auto;
  background: #cccccc;
}

开发者工具效果:

安卓效果:

iPhone效果:

兼容描述:在微信开发者工具上和安卓手机上都正常,但在iPhone上显示的flex子元素会占满一行。并且我通过各个浏览器测试后,发现结果都是能够正常显示的。

求解:

1、该情况是否为微信小程序的BUG?

2、如果是,如果解决这个问题?

2 回复

有试过,没有问题

iOS 的 safari 有试过吗

回到顶部