Google Chrome input的height和line-height设置为相同的比默认高度高的值时,当input控件获得焦点并且没有输入内容时,input中的光标会占满整个input控件(如果设置了padding-top或padding-bottom则会低于整个控件的高度),但输入内容后光标高度又马上恢复为字体的高度,效果图和案例代码如下,那么怎么解决这个问题呢?
<!DOCTYPE html> <html> <head> <title>line-height</title> <meta charset="utf-8" /> <style> *{outline:none;} body,input,textarea,button{ font-size:200%; font-family:arial; } input{ height:2.4em; line-height:2.4em; padding:0 0.1em; } </style> </head> <body> <input type="text" placeholder="想输入什么?" autofocus /> </body> </html>
Google Chrome input line-height Bug 解决方案
Google Chrome input 设置 line-height 后光标变得和input一样高
原文:http://www.cnblogs.com/blosaa/p/4911143.html