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、火狐、谷歌浏览器,光标定位问题的更多相关文章
- laydate.js在火狐下的定位问题
这个情况不知道在火狐的什么情况下会出现这个问题,但是他的demo定位在火狐下是没有问题的. 正常情况下展示位置是这样的 但是呢,在我的火狐下展示的位置是这样的. 哎,默默的读源码吧: 源码: 修改后的 ...
- 解决replace格式替换后光标定位问题
场景:格式化银行卡444格式 手机号344格式 身份证号684格式 校验数据格式,replace后光标定位错乱 或光标一直定位在最后 解决,只针对input,代码用的vue: 获取光标位置: getC ...
- 火狐谷歌浏览器Json查看插件
1.搜: Firefox的JSON插件 参考: Chrome/FireFox浏览器下处理JSON的插件_Bruce_新浪博客 JSONView :: Firefox 附加组件 但是后来去发现没用: 打 ...
- IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部
E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...
- div光标定位问题总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery uploadify在谷歌和火狐浏览器下无法上传
原因: 由于jQuery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器.但firefox.chrome不会这样做 ...
- input光标位置
兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...
- [ActionScript] AS3解决html与flash鼠标滚轮冲突的问题
JS端: <script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; va ...
- CSS3条件判断——@supports/window.CSS.supports()(转)
CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...
随机推荐
- Oracle插入时间
现象:Oracle 插入时间时 ,报错:ORA-01861: 文字与格式字符串不匹配 解决方法: 这个错误一般出现在时间字段上,即你插入的时间格式和数据库现有的时间格式不一致,解决的方法是格式化你 插 ...
- 测试post
http://www.atool.org/httptest.php 这里也可以测试 火狐有插件:HttpRequester Chrome有插件:Postman
- 关于三星A7屏幕锁已由管理员、加密政策,或证书存储禁用
解决办法:设定-安全-清除证书-再返回锁定屏幕-把密码锁定-改为滑动.....
- 【leetcode❤python】 234. Palindrome Linked List
#-*- coding: UTF-8 -*-class Solution(object): def isPalindrome(self, head): ""&q ...
- 【leetcode❤python】198. House Robber
class Solution(object): def rob(self, nums): """ :type nums: List[in ...
- eclipse选中变量,相同变量高亮。
选择Windows->Preferences->Java->Editor->Mark Occurrences,全部选择并保存. 如下图:
- jenkins远程命令执行利用工具
昨天看小飞侠写的py的jenkins的脚本,昨天晚上在微信里评论今天写一个JAVA的GUI的tools. 早上花了点时间写一下: code: package com.tools; import jav ...
- Servlet&jsp基础:第四部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- implement Cartographer ROS for TurtleBots
github source: https://github.com/googlecartographer/cartographer_turtlebot 1. Building & Instal ...
- maven实现依赖的“全局排除”
大多数java应用源码构建和依赖管理是使用maven来实现的,maven也是java构建和依赖管理的事实上的标准.我们的应用系统也都是基于maven构建的,maven虽然在依赖管理方面确实很牛叉,但是 ...