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

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

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

参考:网络信息

时间: 2024-10-19 13:14:37

input 光标在 chrome下不兼容 解决方案的相关文章

取消chrome下input和textarea的聚焦边框

取消chrome下input和textarea的聚焦边框 2011-12-13 15:48:42|  分类: css兼容问题|举报|字号 订阅 取消chrome下input和textarea的聚焦边框: input,button,select,textarea{outline:none} 取消chrome下textarea可拖动放大: textarea{resize:none} 最后,写在一起,重置input和textarea的默认样式: input,button,select,textarea

关于chrome下input中Enter的keydown事件会自动提交form的疑问与解决

当页面有<form>操作时,浏览器会有默认的响应enter键就提交form表单. 看html代码 <form action="http://www.7k7k.com"> <input type="text"> 当你在input框里输入后,按enter键,就会默认提交form, 但实际需求并不是这样的,比如在input输入时会有弹出的suggestion选项让用户选择,用户按了enter键后并不想直接提交,所以需要在部分逻辑下需要取

chrome下float元素下input选中内容bug

今天在写一个小demo的时候,发现chrome下一个很奇怪的bug. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chrome下float bug</title> <style> .clearfix{*zoom:1;} .clearfix:after{content:&qu

IE下设置unselectable与onselectstart属性的bug,Firefox与Chrome下的解决方案

在IE下给DIV设置unselectable与onselectstart属性,可以让div的内容不能选中,这个功能在很多情况下,非常有用,但是他的bug太明显, 直接使用一个DIV是可以的,比如: [html] view plaincopy <div unselectable="on" onselectstart="return false;">不能选中的内容</div> 但是假如在这个DIV前面在出现一个普通的DIV,那就有问题了,比如:

input 的 placeholder属性在IE8下的兼容处理

placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿placeholder属性的样式,并给input 的value赋值placeholder属性的值 2. input的type属性是password的情况,用上面的方法处理提示语为密码文 处理思路: 新添加一个标签,模仿placeholder属性 直接上代码: css部分: 1 .input-item

input光标位置

兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自动到最后位置 火狐:input框插入文字后,光标在插入文字的后面 兼容:光标在文字的最后面 function moveEnd(obj){ obj.focus(); var len = obj.value.length; if (document.selection) { var sel = obj.

input光标大小

最近在做项目忘记密码页面时,input光标大小需要统一.同时也需要兼容ie8浏览器. 总结如下: IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font-size一致.该行无文字时,光标高度与input的height一致. Chrome:该行无文字时,光标高度与line-height一致:该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致

mobile web retina 下 1px 边框解决方案

http://www.tuicool.com/articles/ZRv6bun 再谈mobile web retina 下 1px 边框解决方案 时间 2015-01-03 12:03:31  Hugo Web前端开发 原文  http://www.ghugo.com/css-retina-hairline/ 主题 WebKitiOSCSS 本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6

Chrome下的语音控制框架MyVoix.js使用篇(四)

在上一篇博文中,我为大家介绍了myvoix.js中的smart learning模块,以及何如使用该功能.(myvoix.js的源码地址会在每一篇文章末尾放出) 文本将拓展 Chrome下的语音控制框架MyVoix.js使用篇(二) 中的实例(没看过的同学请猛戳链接),具象地介绍smart learning模块的使用.在之前的实例中,我们通过语音输入,让 Hello My Voix 标题变化成各种颜色, 并且通过预存指令来增加语音指令的识别率.在本文中将去除预存指令这一块,通过smart lea