input 光标在 chrome下不兼容 解决方案
2024-08-31 03:26:29
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*/
也可以参考 腾讯好莱坞影视的 搜索框
=-================
参考:网络信息
最新文章
- Oozie分布式任务的工作流——Sqoop篇
- 我对Jenkins的认识
- Factorization Machine因子分解机
- linux安装软件的学习
- NOIP欢乐模拟赛 T2 解题报告
- Session.Abandon, Session.Clear和Session.Remove的区别
- POJ 1149 PIGS ★(经典网络流构图)
- SQL语句优化汇总(上) 感动啊 学习 收藏了
- db2 将原表列notnull属性修改为null属性的方法 (查看主键约束,唯一约束去syscat.tabconst)
- C#中 dynamic 关键字
- 2018-2019-2 20175311 实验一《Java开发环境的熟悉》实验报告
- 洛谷P4438 [HNOI/AHOI2018]道路(dp)
- go语言练习:文件哈希
- MIT-6.824 Lab 3: Fault-tolerant Key/Value Service
- Error LNK2019:Unresolved External Symbol 的解决方案
- Unity的shader学习1
- JDBC 流程
- Chrome 的书签太多如何分类整理比较好
- oracle数据库导入导出数据
- js判断两个日期是否在几个月之内