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. Python学习笔记-Day3-文件操作

    open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=True) 打开文件并返回一个 ...

  2. linux之eventfd()

    参考:http://www.man7.org/linux/man-pages/man2/eventfd.2.html 一.简介 简单来说,这个函数就是创建一个用于事件通知的文件描述符.它类似于pipe ...

  3. SharePoint自动化系列——Create a local user and add to SharePoint

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 实现过程:在本地创建一个local user并将该user添加到Administrators组中, ...

  4. 2016CCPC东北地区大学生程序设计竞赛 1005 HDU5926

    链接http://acm.hdu.edu.cn/showproblem.php?pid=5926 题意:给我们一个矩阵,问你根据连连看的玩法可以消去其中的元素 解法:连连看怎么玩,就怎么写,别忘记边界 ...

  5. Linux 常见的trouble shooting故障排错

    Linux 常见的trouble shooting故障排错 备份开机所必须运行的程序对一个运维人员来说是非常有必要的.在实际生产环境中,系统和数据基本都是安装在不同的硬盘上面,因为企业最关心的还是数据 ...

  6. .Net验证码实现基础--Draw

    命名空间 using System.Draw; using System.Draw.Drawing2D; 在form等控件的 事件中 添加 paint事件 ///////画各种形状(空心)////// ...

  7. Android 进度条改变图片透明度

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  8. Git恢复reset --hard丢失的文件

    在使用 Git 的过程中,有时会不小心丢失 commit 信息.这一般出现在以下情况下:强制删除了一个分支而后又想重新使用这个分支,hard-reset 了一个分支从而丢弃了分支的部分 commit. ...

  9. 【转载】Linux的进程间通信-信号量

    原文:Linux的进程间通信-信号量 Linux的进程间通信-信号量 版权声明: 本文章内容在非商业使用前提下可无需授权任意转载.发布. 转载.发布请务必注明作者和其微博.微信公众号地址,以便读者询问 ...

  10. Eclipse中新建WEB项目,JSP页面报错。

    在Eclipse中新建java web项目,在JSP页面的第一行提示这个错误: [The superclass "javax.servlet.http.HttpServlet" w ...