细数入行开发以来，遇到的大大小小的坑，有的填上了，有的找不到了，还有的依旧静静地躺在那里，你去填也好，不去填也好，她就静静的待在哪里，动也不动。。。
一直以来不喜欢总结，所以总是慢半拍，最近终于狠下心总结一下，开发以来解决的那些大大小小的坑，可惜，当你爱我时，你在身边，当我回首时，你已远走，寂静，悄然。。。
一、margin属性在IE8情况下的双边距问题，相信大多数同学对这一问题都比较熟悉，而且解决方法 也是多如牛毛，不过现在要说的不是IE8，而是微信在IOS10.2系统的WKwebview内核的页面，更新之后的微信内核同样会出现双边距，解决方法也很简单，换成padding撑开距离就好。
二、IOS手机运行微信页面，调用MUI的picker会同时调用到IOS的输入软键盘，解决方法则是在调用picker之前禁用ios软键盘，
1.解决办法为：为input添加一个readonly="readonly"属性；
<input readonly ="readonly" type="text" >
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。
示例：
<input type=text style='ime-mode: disabled; '>
三、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;
全部添加进外层父元素的样式里会产生一种叫做‘神奇’的效果。
网友评论