Google Chrome input 设置 line-height 后光标变得和input一样高

时间：2022-02-17 20:45:37

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 解决方案

    • 去掉 inline-height 属性，但这会导致IE6/7/8浏览器中input的光标偏移到input左上方，在标准浏览器(特指Google Chrome, Firefox, Opera, Safari, IE 9+)中，如果对input设置了height，而没有设置line-height，浏览器会自动使input中的内容和光标垂直居中对齐，而且光标的高度和字的高度一样。IE8及更早版本非标准，必须将height和line-height设置为相同的值才能使input中的内容垂直居中对齐，这样修正了一个浏览器，却弄坏了更多浏览器，真是得不偿失，请看下面的完美解决方案。
    • 增加一条样式 input[type="text"]:focus{line-height: normal}，这会导致IE8中input光标偏移到input左上方，IE6/7/9及更新版本正常显示。只要再加上一条CSS hack，即可解决问题，实现所有主流浏览器兼容：input[type="text"]:focus{line-height: normal; line-height: 2.4em\9;}，其中的2.4em就是最初设置的值。
    • Google Chrome 39已经修正了这个BUG，这才是最完美的解决方案。

相关文章