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

Posted 2020-07-08 随便写写

最近做的项目，发现一堆问题，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在设置的高度内部。