IE:不管该行有没有文字,光标高度与font-size一致。

FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。

Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

解决的方案:
给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题

input{
height: 16px;
padding: 4px 0px;
font-size: 12px;
}

CSS可以参照如下定义,注意顺序:
#menu { line-height: 23px; } /* firefox 浏览器实行这句定义 */
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 这句定义主要尖对IE8来hack*/
#menu { *line-height: 23px; } /*ie6,ie7 这句定义主要尖对IE7来hack*/
#menu { _line-height: 23px; } /*ie6 浏览器优先实行这句定义*/ 或者写成一句

#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; } 或者

* html #menu { line-height: 23px; } /* IE6 浏览器实行这句定义 */
*+html #menu { line-height: 23px; } /* IE7 浏览器实行这句定义*/

以上的解决方案有时候不好用,可以对不同浏览器设置不同的line-height,就利用以上的规则

.dp_search input.search_txt{height:30px;width:380px;font-size:12px;color:#cccccc;float:left;padding-left:5px;padding-right: 5px;border:3px solid #8e0000;line-height:16px;line-height:30px\9;}

以上的css代码,设置line-height:30px的时候,谷歌浏览器下,光标撑大,而且输入字的同时,光标顶着输入框往下,不居中;根据以上的规则所以设置line-height:16px,但此时,火狐浏览器下正常,但ie浏览器下又不对了,输入的字体往上跑,所以根据以上规则单独给ie浏览器设置一个line-height:16px\9;

http://www.cnblogs.com/qingling/p/3361923.html

ie、火狐、谷歌浏览器,光标定位问题的更多相关文章

  1. laydate.js在火狐下的定位问题

    这个情况不知道在火狐的什么情况下会出现这个问题,但是他的demo定位在火狐下是没有问题的. 正常情况下展示位置是这样的 但是呢,在我的火狐下展示的位置是这样的. 哎,默默的读源码吧: 源码: 修改后的 ...

  2. 解决replace格式替换后光标定位问题

    场景:格式化银行卡444格式 手机号344格式 身份证号684格式 校验数据格式,replace后光标定位错乱 或光标一直定位在最后 解决,只针对input,代码用的vue: 获取光标位置: getC ...

  3. 火狐谷歌浏览器Json查看插件

    1.搜: Firefox的JSON插件 参考: Chrome/FireFox浏览器下处理JSON的插件_Bruce_新浪博客 JSONView :: Firefox 附加组件 但是后来去发现没用: 打 ...

  4. IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

    E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...

  5. div光标定位问题总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery uploadify在谷歌和火狐浏览器下无法上传

    原因: 由于jQuery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器.但firefox.chrome不会这样做 ...

  7. input光标位置

    兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...

  8. [ActionScript] AS3解决html与flash鼠标滚轮冲突的问题

    JS端: <script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; va ...

  9. CSS3条件判断——@supports/window.CSS.supports()(转)

    CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...

随机推荐

  1. 判断一个值是否为null或者undefined

    var a=null; var b=undefined; if(a===null){ //a==null alert("a=null") }else{ alert("a= ...

  2. Android中如何查看内存

    文章参照自:http://stackoverflow.com/questions/2298208/how-to-discover-memory-usage-of-my-application-in-a ...

  3. CentOS6 搭建Git仓库

    近期上了Redmine以后,系统集成了Git的联动功能,于是萌生了搭建内网仓库的想法,特此记录一下: 1.安装Git yum -y install git 2.创建用户及密码 useradd git ...

  4. openldap---ldapsearch使用

    ldapsearch 參数表 下表描写叙述能够用于 ldapsearch 的区分大写和小写的參数. 參数 用途 -? 打印关于使用 ldapsearch 的帮助. -a deref 指定别名反向引用. ...

  5. 消除多余的row

    tableviewName.tableFooterView = [[UIView alloc]initWithFrame:CGRectZero];

  6. Java 读取 json文件

    public ResponseBean getAreas() { String path = getClass().getClassLoader().getResource("area.js ...

  7. Centos7上使用tomcat8

    1.上传apache-tomcat-8.5.39.tar.gz到/usr/local 2.解压文件:tar -zxvf apache-tomcat-8.5.39.tar.gz 3.把文件夹名改简单一些 ...

  8. iptables防火墙常用配置介绍

    参考地址 http://www.cnblogs.com/metoy/p/4320813.html http://netfilter.org/ iptables http://man.chinaunix ...

  9. Zookeeper客户端介绍

    客户端是开发人员使用Zookeeper的主要的途径,以下内容将对Zookeeper的内部原理进行详细的学习和讲解.ZooKeeper的客户端主要有一下几个核心组件组成: Zookeeper:提供客户端 ...

  10. ab压力测试nginx

    centos7系统: yum install httpd-tools -y #安装ab压力测试工具