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，这才是最完美的解决方案。

Google Chrome input 设置 line-height 后光标变得和input一样高的更多相关文章

  1. 【转】google chrome如何设置主页

    原文网址:http://jingyan.baidu.com/article/8275fc86bf916c46a13cf666.html google chrome是一款拥有众多优秀插件的浏览器,是我们 ...

  2. input设置为readonly后js设置intput的值后台仍然可以接收到

    今天发现一个奇怪现象,一个input属性readonly的值被设置为readonly,然后有前台js给input设置了新值. 虽然前台看不到效果,但是提交到后台后,仍然可以接收到新值,感觉很奇怪. 我 ...

  3. input 设置 display:none后 jquery无法给input赋值

    问题出现场景:为什么要用 jquery给input赋值,为什么input带有display:none 在做字典查询的时候,查询参数有字典类型的treeSelect 下拉框,treeSelect渲染后, ...

  4. 给类型为text的input设置value值却无法修改

    给类型为text的input设置value值后就无法修改了 我的页面显示为如下但是退格却无法改变他的值 原来是缺少onChange事件,没法监听value的改变 所以需要添加 onChange={th ...

  5. Google chrome的字体设置

    http://blog.sina.com.cn/s/blog_a3b863da01016sv3.html 谷歌浏览器(Google chrome)速度很快,很好用.问题是字体显示有时候不对:用英文版的 ...

  6. 小程序中input设置宽度后宽度还有空间，但是placeholder被遮挡问题

    最近在做小程序,已经设置了宽高,placeholder没有超出input宽度,却被挡住了一部分,上代码看一下: wxml: <view class='container'> <inp ...

  7. chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security

    chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

  8. Google Chrome 浏览器的检索语言设置

    解决为何从一开始安装Google Chrome 浏览器的时候,使用Google 搜索,结果都是日文的问题. 藏的比较隐蔽,没法在“设置”那里修改. 1.问题:搜索内容均是日文: 2.注意到右边有一个“ ...

  9. 解决ios下部分手机在input设置为readonly属性时，依然显示光标

    解决ios下部分手机在input设置为readonly属性时,依然显示光标 在出现如上所说的问题是尝试给input 加上  onfocus="this.blur()"  方法 添加 ...

随机推荐

  1. 使用Texture2D创建Cubemap

    网上有很多,但大多使用Camera.RenderToCubemap接口,不能满足需求. 写了段代码可以载入Texture2D生成Cubemap(在Editor下运行): /// <summary ...

  2. easyui datagrid使用参考

    数据表格 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值. 依赖关系 控制面板 缩放 链接按钮 分页 使用方法 <table id=&qu ...

  3. P2679 子串

    http://www.luogu.org/problem/show?pid=2679 题目描述 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后 ...

  4. activiti学习总结

    Activiti界面元素的使用总结 一.图形设计中元素的使用 1.SequenceFlow:连接线,可以连接两个任务,来管理流程实例的流向 -----General -----id:流程的id,用与程 ...

  5. raid0,raid1,raid10,raid5,raid50,raid6,raid60的功能总结简述

    1,raid0的特性:采用剥离,数据将在几个磁盘上进行分割.数据被分成很多数据块,每一数据块会被写入不同的磁盘.从而, 每一磁盘的工作负荷都得到了降低,这有助于加速数据传输.RAID-0可让磁盘更好地 ...

  6. BZOJ 1855 股票交易（单调队列优化DP）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1855 题意:最近lxhgww又迷上了投资股票, 通过一段时间的观察和学习,他总结出了股票 ...

  7. BZOJ 2132 圈地计划（最小割）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2132 题意:n*m的格子染色黑白,对于格子(i,j)染黑色则价值为A[i][j],白色为 ...

  8. Phonegap项目中禁用WebViewBounce

    UIWebView是iOS SDK中一个最常用的控件,在PhoneGap中,默认也是使用UIWebView作为默认视图显示我们的HTML应用的.   在使用PhoneGap的项目中,默认WebView ...

  9. [HRBUSTOJ1476]Pairs（FFT）

    题目链接:http://acm-software.hrbust.edu.cn/problem.php?id=1476 题意:给n个数,m次询问,每次询问一个k.问n个数里两数之和严格小于k的数对. 根 ...

  10. kaili 2.0 虚拟机修改ip

    第一步:将虚拟机设置为桥接状态,并勾选上复制物理网络连接状态