Home > Web Front-end > HTML Tutorial > input输入框中光标高度的变化问题_html/css_WEB-ITnose

input输入框中光标高度的变化问题_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:33:19
Original
1633 people have browsed it

 

 

input[type='text']文本框光标高度在有输入内容和为空时发生很大变化。

 

首先,先看看问题产生的原因:chrome浏览器对光标高度的设置原则为,当没有内容的时候光标的高度=input的line-height的值,当有内容时,光标从input的顶端到文字的底部。


OK,既然知道了原因,我们就相应才去一些措施。尝试了两种方法去做:。


方法1:将line-height的值设置为跟字体大小一致;如果高度达不到,用padding去撑;

方法2:对chrome不设置line-height,它会自动文字居中,对ie进行hack设置line-height的值以保证文字垂直居中;这里要注意一下,如果在reset的样式文件中有设置line-height等值,请进行line-height的重置,可以用line-height:normal。

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template