调整input里面的输入光标大小并兼容主流浏览器
网站建设 2023-01-28 21:39www.1681989.com免费网站
在项目里碰到过一个问题
put输入框用一个背景图模拟,设置height和le-height一样的高度,使里面的输入文字能够居中,如下图
在FF下出现的情况是点击put时,输入光标其实上跟put的height一样高,但当开始输入文字时,光标又变得跟文字一样高,
chrome下光标跟put的height一样高,
而IE下光标跟文字的大小一致。
初步结论如下
IE不管该行有没有文字,光标高度与font-size一致。
FF该行无文字时,光标高度与put的height一致。该行有文字时,光标高度与font-size一致。(最新版的好像和ie一样了)
Chrome该行无文字时,光标高度与le-height一致;该行有文字时,光标高度从put顶部到文字底部(这两种情况都是在有设定le-height的时候),如果没有le-height,则是与font-size一致。
解决办法
1,给put的height设定一个较小的高度,然后用paddg去填充,基本上可以解决所有浏览器的问题
put{
height: 16px;
paddg: 4px 0px;
font-size: 12px;
}
2,只给IE le-height就可以了。
-ms-le-height:40px;
put输入框用一个背景图模拟,设置height和le-height一样的高度,使里面的输入文字能够居中,如下图
在FF下出现的情况是点击put时,输入光标其实上跟put的height一样高,但当开始输入文字时,光标又变得跟文字一样高,
chrome下光标跟put的height一样高,
而IE下光标跟文字的大小一致。
初步结论如下
IE不管该行有没有文字,光标高度与font-size一致。
FF该行无文字时,光标高度与put的height一致。该行有文字时,光标高度与font-size一致。(最新版的好像和ie一样了)
Chrome该行无文字时,光标高度与le-height一致;该行有文字时,光标高度从put顶部到文字底部(这两种情况都是在有设定le-height的时候),如果没有le-height,则是与font-size一致。
解决办法
1,给put的height设定一个较小的高度,然后用paddg去填充,基本上可以解决所有浏览器的问题
复制代码
代码如下:put{
height: 16px;
paddg: 4px 0px;
font-size: 12px;
}
2,只给IE le-height就可以了。
复制代码
代码如下:-ms-le-height:40px;
上一篇:CSS样式子代选择符(大于号 >)使用实例
下一篇:css样式制作的漂亮按钮
网站设计
- 德昌优化关键词排名推广 提升在线曝光率的有效
- 2021上海高端网站设计哪家好
- 所谓的域名估价是怎么做的 有什么方法
- 怎么维护seo关键词排名 元宝分享一些技巧
- 肃宁SEO 提升您网站可见性的最佳策略
- 国际域名注册会有什么要求 新手有什么需要掌握
- 域名更换注意什么 新手如何更换域名
- 网站防护可以采用高防CDN吗
- 凡科模板建站的优势有哪些
- 注册域名的意义 域名注册为什么那么火爆
- 南丹百度关键词SEO 全面提升网站可见性的指南
- 新手如何买网址域名 买网址域名有哪些必备知识
- 企业如何选择网络推广公司
- 美图跨界投资HBN颜究所 精品双拼域名meitu.com更亮
- iplc机场专线网络是什么 有什么优势特点
- black域名怎么样 如何申请black域名