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在设置的高度内部。

    个性签名:别低头,王冠会掉,别后退,梦想会碎~~~~~
  • 相关阅读:
    EEPROM芯片AT2402驱动
    FPGA 状态机(FSM)的三段式推荐写法
    1602液晶驱动
    Bresenham快速画直线算法
    I2C总线驱动程序
    从数据库中取时间类型显示
    C# 页面关联类似模式窗口
    C# 页面javascript 页面跳转刷新
    网页有趣的时间显示控件
    DataSet
  • 原文地址:https://www.cnblogs.com/lily1010/p/5506509.html
Copyright © 2011-2022 走看看