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. Linux高级变量

    http://blog.chinaunix.net/uid-27040051-id-3450991.html 高级变量 基本形式 [1].变量扩展 格式 ${变量名称} [2].命令扩展 格式 $(命 ...

  2. JAVA基础知识之多线程——三种实现多线程的方法及区别

    所有JAVA线程都必须是Thread或其子类的实例. 继承Thread类创建线程 步骤如下, 定义Thead子类并实现run()方法,run()是线程执行体 创建此子类实例对象,即创建了线程对象 调用 ...

  3. volatile关键字解析

    转载:http://www.cnblogs.com/dolphin0520/p/3920373.html volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受 ...

  4. EasyUI DataGrid 复选框

    使用checkbox,用户可以选定/取消数据行.添加checkbox列,我们简单的添加列的checkbox属性,并且设置为true.代码像这样:<table id="tt"& ...

  5. windows10 IOT +Azure会议概要总结

    windows10 IOT +Azure会议概要总结 会议资料将放到https://channel9.msdn.com/Blogs/WinHEC FAQ:msftsziot@microsoft.com ...

  6. 01.AFNetworking原理及常用操作

    AFN的六大模块 NSURLConnection,主要对NSURLConnection进行了进一步的封装,包含以下核心的类: AFURLConnectionOperation AFHTTPReques ...

  7. ThinkPHP 模型(Model)命名规范

    一个小问题搞了好久:如果数据库的表名中有下划线,那么在用thinkphp做自动完成时注意Model类的命名要变成驼峰法,文件名和类名都要变.( 另外注意:只有使用create方法创建数据时才能调用到自 ...

  8. TreeList的使用

    添加列 TreeListColumn column = treeList1.Columns.Add(); column.Caption = @"建筑列表"; column.Visi ...

  9. IDoc

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. Ubuntu14.04设置开机root用户登录

    1.sudo vim /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2.添加:greeter-show-manual-login=true 3.su ...