html - 如何解决输入字段上的错误行高?

标签 html css wordpress

你如何给一个固定高度的输入字段,它所含文本的跨浏览器垂直对齐方式?

到目前为止,line-height 似乎是我的最佳选择。但是,在像 Chrome 或 Safari 这样的 webkit 浏览器上,复制/粘贴时光标会跳到顶部对齐。

我注意到 Wordpress 似乎有一个解决方案,用他们的 wp-login form .

有人知道 Wordpress 是如何做到这一点的吗?

CSS

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

最佳答案

我为整个文档设置了行高,vertical-align: middle 用于标签和输入以及 padding.
我还为输入重新定义了 font(系列和大小),与 label 相同,因为浏览器已经有了默认值,例如 13.3px...
最后 border: 1px solid someColor 将有助于浏览器多 1 px 或插入。

没有高度

然后是 Chrome 及其选择。哦@*$£#... isellsoap forms.css通过删除和重新定义所有内容来确定它,除了它使用高度而不是填充(在我看来它不太通用)

关于html - 如何解决输入字段上的错误行高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15603197/

相关文章:

jquery - 如何使2个div标签彼此相邻

javascript - JQuery 滚动到 anchor 表演奇怪

html - img 标签和 div 彼此相邻

css - 如何为div的底部实现 "clear",而不仅仅是左右

javascript - 在媒体窗口中选择图片后添加/更新自定义字段 (Wordpress)

wordpress - 如何过滤客户 API Woocommerce 2.6 的订单

php - 如何使用 pre_get_posts 隐藏自定义帖子类型类别

ios - 让数字键盘显示在 input type=text iOS 上

PHP - 检查页面是否在移动或桌面浏览器上运行

javascript - 如何防止 fadeIn/Out 在展开/折叠标题时闪烁?