@PheonixHkbxoic
2017-04-28T22:56:30.000000Z
字数 1205
阅读 804
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无法使用压缩文件,必须使用原文件
- 需要混淆
- 需要加密