找回密码
 注册

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

php 发表于 2014/12/20 01:42 | 显示全部楼层 |阅读模式
Google Chrome input的height和line-height设置为相同的比默认高度高的值时,当input控件获得焦点并且没有输入内容时,input中的光标会占满整个input控件(如果设置了padding-top或padding-bottom则会低于整个控件的高度),但输入内容后光标高度又马上恢复为字体的高度,效果图和案例代码如下,那么怎么解决这个问题呢?
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>line-height</title>
  5.                 <meta charset="utf-8" />
  6.                 <style>
  7.                         *{outline:none;}
  8.                         body,input,textarea,button{
  9.                                 font-size:200%;
  10.                                 font-family:arial;
  11.                         }
  12.                         input{
  13.                                 height:2.4em;
  14.                                 line-height:2.4em;
  15.                                 padding:0 0.1em;
  16.                         }
  17.                 </style>
  18.         </head>
  19.         <body>
  20.                 <input type="text" placeholder="想输入什么?" autofocus />
  21.         </body>
  22. </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,这才是最完美的解决方案。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表