找回密码
 新建账号

[CSS] Google Chrome input 自定义高度和行高后输入文字前光标上移错位

[复制链接]
php 发表于 2014/10/17 04:00 | 显示全部楼层 |阅读模式
自从 Google Chrome 37-38 中如果对一个文本输入框定义了height和line-height,并且他们的值相同,那么在输入文字前 Google Chrome 文本输入框的光标会向上移动到输入框的左上方,造成错位,而不是在input中间。
以下代码在Google Chrome 37-38里面将会造成input光标上移错位,如图所示。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <style>
  5.                 input{
  6.                         height:4em;
  7.                         line-height:4em;
  8.                 }
  9.         </style>
  10. </head>
  11. <body>
  12.         <input type="text" id="51-n.com" placeholder="SearchText" />
  13. </body>
  14. </html>
复制代码

解决Google Chrome光标上移的方法是直接把line-height给删除掉。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <style>
  5.                 input{
  6.                         height:4em;
  7.                 }
  8.         </style>
  9. </head>
  10. <body>
  11.         <input type="text" id="51-n.com" placeholder="SearchText" />
  12. </body>
  13. </html>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?新建账号

×

手机版|轻松E站

GMT+8, 2024/12/22 01:00

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