V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
abcbuzhiming
V2EX  ›  前端开发

[CSS]行内元素中的表单元素 Input 为何和一般行内元素的表现不太一样?

  •  
  •   abcbuzhiming · 2019-03-19 09:36:13 +08:00 · 2287 次点击
    这是一个创建于 1836 天前的主题,其中的信息可能已经有所发展或是发生改变。
    提出这个问题前,我已经找了不少资料,知道 IFC 的概念,至少行级元素有 4 条垂直对齐线,可这还是解释不了我的疑问。这个问题其实很常见,就是很多页面都有的,一和 input 表单和它的说明文字 lable 元素,处于同一行时,双方都垂直居中并且文字表现一致的问题。网上有不少这个问题的解决方案,但是他们都是讲怎么干,没讲清楚原理。
    为了尽量降低干扰,我这里仅谈 chrome 最新版浏览器下的表现,不谈其它浏览器的兼容问题。
    Dom 元素很简单如下:
    <form action="" method="">
    <label>请输入姓名:</label><input type="text" name="" id="" value="" placeholder="名"/>
    </form>

    我现在描述一下我感到困惑的地方:
    1.当我给 label 元素和 input 元素加上 border 的时候,可以很明显的看到,input 元素的 border 高度是比 lable 低的。这是第一个困惑,同是行内元素为什么他们的默认高度不一样?
    2.进一步观察发现,这两个元素里的字体大小是不同的(我并没有设置字体样式,都是默认),根据行框的高度是由内容决定的 css 规范,这可能就是为啥它们默认高度不一样的原因。但是问题就是:同是行内元素为什么他们的默认字体大小不一样?
    3.于是我给两个元素都设置 font-size: 20px,好了,现在输入到 input 里的文字看上去和外面的 lable 文字是对齐的了。但是新问题又出现了,为啥 placeholder 文字看上去像是往上飘了一些,而且我试验了网上的办法,input::-webkit-input-placeholder,设置对齐啥的都是没用的。

    我感到奇怪的是按照 CSS 标准,类型为 text 的 input 元素并不是可替换元素,它的样式也是由 CSS 控制的,为啥它的表现和其它行内元素的表现如此的不一致,默认情况下都不一致。并且,placeholder 的样式设计是从何而来,它是故意被设计的比正常输入文字高度往上飘一些的吗?如何让它表现的和输入文字的样式一致?
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5431 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 09:08 · PVG 17:08 · LAX 02:08 · JFK 05:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.