@PheonixHkbxoic
2017-04-28T14:56:30.000000Z
字数 1205
阅读 935
AnQuan
目录:
注 :
解析:
- 有line-height的情况下 一般于line-height有关
- 没有的话一般由 字体大小有关
- 跟使用的浏览器也有关系
解决方案: 如果input前面有文字且想上下居中对齐 光标正常.那么大致如下:结构:<div class="mui-row"><div class="mui-col-xs-3 input-label">姓名</div><div class="mui-col-xs-9"><input type="text" placeholder="请输入姓名" /></div></div>样式:.input-label{padding-top:2px;}.mui-row>div,.mui-row>div>input{height:30px;line-height:26px;font-size:12px;}注:line-height于height相同时会上下居中,但是在mui中光标高度于line-height相同,致使光标在input中上下占满,体验很差,故降低line-height大小,来减小光标高度.另外,虽然光标正常了,但这又造成input-label中的文字向上偏移,故稍微增加顶部内边距来解决
IE:不管该行有没有文字,光标高度与font-size一致。FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。解决的方案:给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题input{height: 16px;padding: 4px 0px;font-size: 12px;}
- 需要去除多余的文件
- js需要打包
mui.picker.css, mui.picker.js无法使用压缩文件,必须使用原文件
- 需要混淆
- 需要加密