input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9

.list li input[type=text] {
 width: 304px;
 height: 52px;
 line-height: normal;
 line-height: 52px\9;
 border: none;
 color: #FFFFFF;
 background: url(../images/txt-bg.png) no-repeat center;
 text-indent: 10px;
 float: left;
}
 
============================
  • 去掉 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,这才是最完美的解决方案

====================

直接写在 input下  
height: 52px; 
line-height: normal;/*为了兼容谷歌*/
 line-height: 52px\9;/*为了兼容IE8*/
 
也可以参考 腾讯好莱坞影视的 搜索框  

=-================

参考:网络信息

最新文章

  1. Oozie分布式任务的工作流——Sqoop篇
  2. 我对Jenkins的认识
  3. Factorization Machine因子分解机
  4. linux安装软件的学习
  5. NOIP欢乐模拟赛 T2 解题报告
  6. Session.Abandon, Session.Clear和Session.Remove的区别
  7. POJ 1149 PIGS ★(经典网络流构图)
  8. SQL语句优化汇总(上) 感动啊 学习 收藏了
  9. db2 将原表列notnull属性修改为null属性的方法 (查看主键约束,唯一约束去syscat.tabconst)
  10. C#中 dynamic 关键字
  11. 2018-2019-2 20175311 实验一《Java开发环境的熟悉》实验报告
  12. 洛谷P4438 [HNOI/AHOI2018]道路(dp)
  13. go语言练习:文件哈希
  14. MIT-6.824 Lab 3: Fault-tolerant Key/Value Service
  15. Error LNK2019:Unresolved External Symbol 的解决方案
  16. Unity的shader学习1
  17. JDBC 流程
  18. Chrome 的书签太多如何分类整理比较好
  19. oracle数据库导入导出数据
  20. js判断两个日期是否在几个月之内

热门文章

  1. 逐步搭建Lamp环境之vim的三种模式以及基本命令
  2. caffe在windows编译project及执行mnist数据集測试
  3. 一行代码巧妙实现iOS返回button
  4. ShuffleNet总结
  5. linux 磁盘管理三部曲——(2)管理分区,文件系统类型格式化
  6. 关于UTF8文件带BOM头可能会引起的错误解析
  7. 如何在华为云软件开发云上搭建JavaWeb,Maven项目
  8. oracle如何连接别人的数据库,需要在本地添加一些配置
  9. 云储存第三方--阿里云OSS VS 又拍云USS
  10. RESTClient调试POST方法&Reflector+de4dot反混淆破解dll