开发中当移动端页面遇到IOS时出现的一些不大不小的坑

细数入行开发以来，遇到的大大小小的坑，有的填上了，有的找不到了，还有的依旧静静地躺在那里，你去填也好，不去填也好，她就静静的待在哪里，动也不动。。。

一直以来不喜欢总结，所以总是慢半拍，最近终于狠下心总结一下，开发以来解决的那些大大小小的坑，可惜，当你爱我时，你在身边，当我回首时，你已远走，寂静，悄然。。。

一、margin属性在IE8情况下的双边距问题，相信大多数同学对这一问题都比较熟悉，而且解决方法也是多如牛毛，不过现在要说的不是IE8，而是微信在IOS10.2系统的WKwebview内核的页面，更新之后的微信内核同样会出现双边距，解决方法也很简单，换成padding撑开距离就好。

二、IOS手机运行微信页面，调用MUI的picker会同时调用到IOS的输入软键盘，解决方法则是在调用picker之前禁用ios软键盘，

1.解决办法为：为input添加一个readonly="readonly"属性；

2.相关知识点：禁用输入法或中文输入

<input type="text" value="" style="ime-mode:disabled" onkeypress="noPermitInput(event)">

关于样式 ime-mode，网上查找如下：

ime-modeCSS提议属性

语法：

ime-mode : auto | active | inactive | disabled

参数：

auto: 不影响IME的状态。与不指定ime-mode属性时相同

active: 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME

inactive: 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME

disabled: 完全禁用IME。对于有焦点的控件（如输入框），用户不可以激活IME

说明：

设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。

对应的脚本特性为imeMode。

示例：

三、ios系统进入页面，软键盘唤起后，页面的 fixed 元素失效（即无法浮动，也可以理解为变成了 absolute 定位）

解决方法：

display: box;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: space-between;

-webkit-justify-content: space-between;

-moz-justify-content: space-between;

-ms-justify-content: space-between;

-o-justify-content: space-between;

justify-content: space-between;

全部添加进外层父元素的样式里会产生一种叫做‘神奇’的效果。