manlili blog

input表单元素的默认padding不一致问题

最近做的项目,发现一堆问题,input type=“text”和type=“button”

(1)在无文字的时候高度是一致的,分别写入相同大小的文字type=“button”高度>type=“text”,查找的资料是padding在不同浏览器的表现不一致,尤其是chrome,具体文章见http://www.cnblogs.com/cpfsdut/articles/4745040.html

(2)一旦给input type=“text”设置line-height,光标会两次变化,找的原因是:

IE:不管该行有没有文字,光标高度与font-size一致。

FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。

Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

(3)解决的方法是,三个都是必须条件:

①一定要设置高度height: 0.4rem;不要设置line-height,因为input默认文字是垂直居中的;

②如果不想让光标充满整个input高度,直接设置font-size大小便可控制光标;

③一定要用box-sizing控制默认的padding在设置的高度内部。

请我喝杯果汁吧!