zoukankan      html  css  js  c++  java
  • input上下居中问题

    IE:不管该行有没有文字,光标高度与font-size一致。
    FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
    Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

    故而,在设置input高度的时候,尽量用padding使其上下居中,可以避免兼容性问题,

    input,textarea{font-size:1rem;height:1rem;padding:2rem 0;}

    注意:input是属于inline-block的标签,所以有高度,高度要和font-size的值一致;不用给line-height;

    line-height的兼容问题不太好解决,容器高度越小,显示效果的差距越明显。稍微大一点的高度,最好把line-height设置为高度+1px,两个平台显示都还不错。

  • 相关阅读:
    CAS简介
    Volatile的3大特性
    dsf对矩阵进行搜索
    JVM
    REST风格
    自定义Starters(自动配置Bean)
    反射和注解的原理
    mybatis的注解开发
    Java的多线程安全
    mybatis(3)
  • 原文地址:https://www.cnblogs.com/wang715100018066/p/6016387.html
Copyright © 2011-2022 走看看