zoukankan      html  css  js  c++  java
  • 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在设置的高度内部。

    个性签名:别低头,王冠会掉,别后退,梦想会碎~~~~~
  • 相关阅读:
    Vue插件之导出EXCEl
    vue.js--加载JSON文件的两种方式
    vue项目中axios的封装
    雪碧图布局
    开始学习算法
    Java中有关Null的9件事
    一个抓取知乎页面图片的简单爬虫
    浅析Java中的final关键字
    Java中String、StringBuilder以及StringBuffer
    把一个数组向右循环移动k位要求时间复杂度为O(n)
  • 原文地址:https://www.cnblogs.com/lily1010/p/5506509.html
Copyright © 2011-2022 走看看