最近做的项目,发现一堆问题,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不一致问题的更多相关文章

  1. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  2. mui弹出输入法遮住input表单元素

    转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素   问题如下:当我用mui开发app时,在mui-sc ...

  3. 自定义常用input表单元素三:纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  4. 自定义常用input表单元素一:纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  5. 自定义常用input表单元素二:纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  6. .net网站开发(一):1.input表单元素

    其实,在半年前我对网站开发还是完全不感冒的,不是没认识,而是只认识到表面.我以为网站模型就那几样,新闻.论坛.博客啥的,仿个站出来有什么意思?但现在我是知道了,大多应用开发还是采用B/S架构的,包括服 ...

  7. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  8. H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  9. html表单元素及表单元素详解

    原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...

随机推荐

  1. 补充==的使用和equals的区别

    字节码的比较     Class 相等与否使用“==” 进行比较,形如 if (adapter == IContentOutlinePage.class)  进行比较,因为字节码在JVM中只有一份,地 ...

  2. Spring Cloud服务的注册与发现

    Spring Cloud简介: Spring Cloud为开发人员提供了快速构建分布式系统中的一些通用模式(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,领导选举,分 ...

  3. SVG动画基础篇

    参考资料: http://www.w3school.com.cn/svg/index.asp https://msdn.microsoft.com/zh-cn/library/gg193979  gi ...

  4. linux 用户管理命令学习

    groupadd www-data 添加组 useradd phpcomposer -g www-data 添加用户并加入组中 passwd phpcomposer 添加密码 usermod -g p ...

  5. Java RSA 加密 解密 签名 验签

    原文:http://gaofulai1988.iteye.com/blog/2262802 import java.io.FileInputStream; import java.io.FileOut ...

  6. Unity -- 入门教程三

    进入这个页面,按编译器版本进行下载,我用的是2010,所以要下载这个. 安装就不用我教了,下面开始看我是如何导入Unity VS的. 点击Import之后我们会发现并没有发生什么,但是接下来我们按一下 ...

  7. [zlib]_[0基础]_[使用Zlib完整解压zip内容]

    场景: 1. 解压文件一般用在下载了一个zip文件之后解压,或者分析某个文件须要解压的操作上. 2. 解压文件,特别是解压带目录的zip文件往往系统没有提供这类Win32 API,当然C#自带库能解压 ...

  8. VS中的 MD/MT设置 【转】

    VS系列工具作为目前微软主打的集成开发环境,在历经了近20多年的发展后,到如今已经可以 说是Windows平台上各种IDE环境中的翘楚了.很多别的开发工具已经难望其项背了,如今VS2010也已经面市很 ...

  9. Cookie学习笔记二:Cookie实例

    今天说说刚刚学到的两个Cookie的最经典应用:自己主动登录和购物车设置 一:自己主动登录 须要两个页面:login.jsp与index.jsp,login.jsp用来输出登录信息,index.jsp ...

  10. 更改 vux Tabbar TabbarItem标题下方的文字激活时的颜色

    步骤一: 打开文件build/webpack.base.conf.js, 找到modeule.exports = vuxLoader, 修改如下(并保存) module.exports = vuxLo ...