ie、火狐、谷歌浏览器,光标定位问题

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、火狐、谷歌浏览器,光标定位问题

时间: 2024-10-10 17:30:35

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

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

E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部 DTD已声明 IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.documentElement.scrollTop  浏览器滚动部分高度,do

iframe Ie下光标定位问题

在IE下 对iframe编辑器js使用 var ifr = document.getElementById('ifr'); var sRange=doc.selection.createRange();sRange.execCommand('insertimage',false,image_src); 来插入图片,图片总是插入在编辑器的前面,于是查找问题,偶然在一篇博客中知道了原因(具体地址疏忽没记下来) 原因是 在IE下 当光标在框中消失,在进行插入的时候,会回到起始位置(因为要显示正在加载的

判断ie浏览器(含11),火狐,谷歌浏览器

最近遇到一个问题,需要在不同的浏览器上设置不同的背景颜色. 本来打算用css @-moz-document url-prefix(){.aa{background:pink}}; @media screen and (-webkit-min-device-pixel-ratio:0) { .aa{background:yellow;}}; 来进行判断,但是同时使用着两种,不能生效,就需要用js来进行判断, $(function(){ if(isFirefox=navigator.userAgen

div光标定位问题总结

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button type="button" onclick="document.getElementById('test').focu

input光标位置

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

解决jQuery uploadify在非IE核心浏览器下无法上传

之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,FireFox 不能正常上传.经过反复研究学习,之所以firefox和360浏览器无法正常运行,是因为FireFox.chrome.360浏览器等支持HTML5的浏览器不会再文件上传时自动带入session信息和cookie,不共享session. 一.jquery uploadify自我介绍: (1).大家好,我是jquery插件大家族中负责实现异步上传的插件,我不是唯一,只是较好用的一款. (2).我的功能: 支持单文件或多文件

Android自定义控件系列案例【五】

案例效果: 实例分析: 在开发银行相关客户端的时候或者开发在线支付相关客户端的时候经常要求用户绑定银行卡,其中银行卡号一般需要空格分隔显示,最常见的就是每4位数以空格进行分隔,以方便用户实时比对自己输入的卡号是否正确.当产品经理或UI设计师把这样的需求拿给我们的时候,我们的大脑会马上告诉我们Android中有个EditText控件可以用来输入卡号,但好像没见过可以分隔显示的属性或方法啊.当我们睁大眼睛对着效果图正发呆的时候,突然发现当用户输入内容的时候还出现了清除图标,点击清空图标还可以清空用户

Android自己定义控件系列案例【五】

案例效果: 案例分析: 在开发银行相关client的时候或者开发在线支付相关client的时候常常要求用户绑定银行卡,当中银行卡号一般须要空格分隔显示.最常见的就是每4位数以空格进行分隔.以方便用户实时比对自己输入的卡号是否正确.当产品经理或UI设计师把这种需求拿给我们的时候.我们的大脑会立即告诉我们Android中有个EditText控件能够用来输入卡号,但好像没见过能够分隔显示的属性或方法啊.当我们睁大眼睛对着效果图正发呆的时候.突然发现当用户输入内容的时候还出现了清空图标,点击清空图标还能

图片上传,图片旋转,拖拽

能够支持IE,谷歌,火狐浏览器(兼容多浏览器不容易啊) 下面仅提供核心思想和部分代码:  拖拽:是使用网上现成的JS代码,在此基础上进行适当的修改即可满足自己的需求,最主要的就是判定拖拽的范围,上传的图片不能给拖没了,所以加上个范围限定,判断超出了这个范围便拖拽无效果. 旋转与缩放要区分浏览器.. 旋转:IE浏览器下想要实现图片的旋转很简单只要调用IE提供的滤镜filter参数为一个旋转矩阵即可.谷歌和火狐浏览器图片显示用的是canvas标签而不是img标签所以图片的旋转需要用canvas标签相