细数入行开发以来,遇到的大大小小的坑,有的填上了,有的找不到了,还有的依旧静静地躺在那里,你去填也好,不去填也好,她就静静的待在哪里,动也不动。。。
一直以来不喜欢总结,所以总是慢半拍,最近终于狠下心总结一下,开发以来解决的那些大大小小的坑,可惜,当你爱我时,你在身边,当我回首时,你已远走,寂静,悄然。。。
一、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;
全部添加进外层父元素的样式里会产生一种叫做‘神奇’的效果。