input 光标在 chrome下不兼容 解决方案

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*/

 

也可以参考 腾讯好莱坞影视的 搜索框  

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

 

参考：网络信息