ios9不兼容flex

<button class="btn>            
   <img src="./m24.png" alt=""><span>啊啊啊</span>             
</button>

<style>
.btn{
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-align-items: center;
   align-items: center;
}
</style>

同事的ios9手机：理想情况应该是button里面的图片跟文字居中显示，然而实际上它们都靠左贴着。

网上的答案是子元素需要是block才行，然而我给img跟span加上display:block也没生效，

于是我把button换成了div（block），发现又可以了。

button是inline-block元素，所以我猜测可能是iso10以下inline-block元素不兼容flex（如果不对大家纠正一下😂）。

<button class="btn>   
    <div class="flex">
        <img src="./m24.png" alt=""><span>啊啊啊</span>    
    </div>             
</button>

<style>
.btn{
   //display: -webkit-flex;
   //display: flex;
   //-webkit-justify-content: center;
   //justify-content: center;
   //-webkit-align-items: center;
   //align-items: center;
}
.flex{
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-align-items: center;
   align-items: center;
}
</style>

这样就可以了