input表单元素的默认padding不一致问题
最近做的项目,发现一堆问题,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在设置的高度内部。
input表单元素的默认padding不一致问题的更多相关文章
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
- mui弹出输入法遮住input表单元素
转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素 问题如下:当我用mui开发app时,在mui-sc ...
- 自定义常用input表单元素三:纯css实现自定义Switch开关按钮
自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...
- 自定义常用input表单元素一:纯css 实现自定义checkbox复选框
最下面那个是之前写的 今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...
- 自定义常用input表单元素二:纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
- .net网站开发(一):1.input表单元素
其实,在半年前我对网站开发还是完全不感冒的,不是没认识,而是只认识到表面.我以为网站模型就那几样,新闻.论坛.博客啥的,仿个站出来有什么意思?但现在我是知道了,大多应用开发还是采用B/S架构的,包括服 ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取
HTML5新增标签以及HTML5新增的api 1.H5并不是新的语言,而是html语言的第五次重大修改--版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...
- html表单元素及表单元素详解
原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...
随机推荐
- BZOJ 4568 [Scoi2016]幸运数字(树链剖分 + 异或线性基)
题目链接 BZOJ 4568 考虑树链剖分+线段树维护每一段区域的异或线性基 对于每个询问,求出该点集的异或线性基.然后求一下这个线性基里面能异或出的最大值即可. #include <bits ...
- Ubuntu 16.04下使用Wine安装文件内容搜索工具Search and Replace
说明: 1.使用的Wine版本是深度出品(Deepin),已经精简了很多没用的配置,使启动能非常快,占用资源小. 2.关于没有.wine文件夹的解决方法:在命令行上运行winecfg: 下载: (链接 ...
- 用AntRun插件测试Maven的生命周期
在用AntRun插件之前,需要了解以下几个知识点: 1.Maven的生命周期,参考:http://www.cnblogs.com/EasonJim/p/6816340.html,主要是要知道生命周期里 ...
- 【IntelliJ idea/My/ecplise】启动项目前,修改配置JVM参数
My/ecplise下都是一样的: IDEA下:
- vue2.0 自定义 生成二维码(QRCode)组件
1.自定义 生成二维码组件 QRCode.vue <!-- 生成二维码 组件 --> <template> <canvas class="qrcode-canv ...
- Android MPAndroidCharts 框架 画可滑动查看的直方图
1.由于公司项目的需求,所以花了1.2天研究 MPAndroidCharts框架 .可是发现好多博客对我都没得帮助.浪费非常多时间在百度上.不得不说google 真是比百度强太多了. 要求:统计出56 ...
- Codeforces初体验
Codeforces印象 这两天抽时间去codeforces体验了一把. 首先,果然有众多大牛存在.非常多名人一直參加每周一次的比赛.积分2000+,并參与出题. 另外.上面题目非常多.预计至少一千题 ...
- UVA 610 - Street Directions(割边)
UVA 610 - Street Directions option=com_onlinejudge&Itemid=8&page=show_problem&category=5 ...
- Spark MLlib Deep Learning Deep Belief Network (深度学习-深度信念网络)2.1
Spark MLlib Deep Learning Deep Belief Network (深度学习-深度信念网络)2.1 http://blog.csdn.net/sunbow0 Spark ML ...
- 【Sprint3冲刺之前】项目完成时间表
Sprint2冲刺成果——项目完成时间表 项目完成时间表 经过Sprint2小组总结会议的探讨,我们决定一起约定项目alpha版本,beta版本,release版本的发布时间,发布形式及预计完成效果 ...