input表单元素的默认padding不一致问题
2024-08-27 14:58:52
最近做的项目,发现一堆问题,input type=“text”和type=“button”
(1)在无文字的时候高度是一致的,分别写入相同大小的文字type=“button”高度>type=“text”,查找的资料是padding在不同浏览器的表现不一致,尤其是chrome,具体文章见http://www.cnblogs.com/cpfsdut/articles/4745040.html
(2)一旦给input type=“text”设置line-height,光标会两次变化,找的原因是:
IE:不管该行有没有文字,光标高度与font-size一致。
FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。
(3)解决的方法是,三个都是必须条件:
①一定要设置高度height: 0.4rem;不要设置line-height,因为input默认文字是垂直居中的;
②如果不想让光标充满整个input高度,直接设置font-size大小便可控制光标;
③一定要用box-sizing控制默认的padding在设置的高度内部。
最新文章
- 《学技术练英语》PPT分享
- python 培训之爬虫
- nginx upstream模块
- windows更新npm
- C文件函数总结
- Oracle 数据迁移(从Oracle11G迁移到更高的版本号Oracle10G低版本号)
- DOS call 中的%cd%,当前文件夹演示
- Css实现一个简单的幻灯片效果页面
- px,em,rem的关系
- [LeetCode] Mirror Reflection 镜面反射
- 【ASP.NET Core快速入门】(四)在CentOS上安装.NET Core运行时、部署到CentOS
- Flask项目笔记
- Android 开发 存储目录的详解
- mktime 夏令时
- 阿里云Centos+Django+Nginx+uWSGI
- 3Linux常用命令
- CAS实现单点登录SSO执行原理探究超详细
- Linux常用基本命令(head)
- 浅浅的分析LED呼吸灯的实现和PWM的关系
- Spring---七大核心模块