首页 > 建站教程 > Div+Css >  input line-height不起作用,input框光标不居中,select框给了高度,但不居中正文

input line-height不起作用,input框光标不居中,select框给了高度,但不居中

1.问题:
     所有的form表单中的 input和select的高度样式写法,不要写成height和line-height;不然就会出现一定的兼容问题;
     该问题也可归结为下面几个问题:
     input,select不适合line-height;
     input框光标不居中;
     input框光标在谷歌浏览器不居中朝上;
     select框给了高度,但不居中;
2.好处:
      这个存在一定的问题:
           1)可以解决input中光标在360浏览器中很长问题;
           2)可以解决input中光标在谷歌浏览器里朝上的问题;
3.解决方案:
     使用padding就可以轻松解决;
                 一般写法:给input和select高度为height:30px; line-height:30px; 这样的写法就会造成上面的问题;
                 我的写法:
                             input写法: padding:5px 3px; height:20px;
                             select写法: padding:5px 3px; height:30px;
                             这样效果和前面的是一样的input和select的区别就在height上;

下面是谷歌和IE8的两种不同写法的截图(其他浏览器您可以运行下面代码依次试试):
input line-height
input和select的line-height和padding不同写法的区别

在不同浏览器运行下面代码查看不同之处:


提示:您可以先修改部分代码再运行


总结:
input和select调整垂直居中,最好用padding进行微调,而不是用line-height,否则会出现IE各浏览器垂直方向不居中的问题。