css 如何解决输入字段的行高问题?

x33g5p2x  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(248)

如何为具有固定高度的输入字段提供跨浏览器的文本垂直对齐?
到目前为止,line-height似乎是我最好的选择。然而,在Chrome或Safari等webkit浏览器上,复制/粘贴时光标会跳到顶部对齐。
我注意到WordPress似乎有一个解决方案,他们的wp-login form
有人知道WordPress是如何做到这一点的吗?
CSS

input {
    width: 240px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
}
t0ybt7op

t0ybt7op1#

我对整个文档使用设置的行高,对标签和输入使用**vertical-align: middle,对padding**。
我还重新定义了font(系列和大小)的输入,与label相同,因为浏览器已经有了它们的默认值,如13.3px...
最后,border: 1px solid someColor将有助于浏览器与1多像素或一个插图。
没有height
然后是Chrome和它的选择。哦,@*$£# ... isellsoap forms.css搞定了它,通过删除和重新定义一切,除了它使用高度而不是填充(在我看来,它的通用性较差)

相关问题