Safari浏览器中input 光标lineheight失效不居中

最新推荐文章于 2021-06-09 11:33:15 发布

吃我一套大宝剑

最新推荐文章于 2021-06-09 11:33:15 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_38026561/article/details/80223240

本文探讨了在Safari浏览器中遇到的一个bug，即当line-height属性与高度相等时，无法使input输入框中的光标垂直居中。提供了一种通过设置padding来实现光标垂直居中的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Safari中bug，line-height 属性和高度相等，不能使input输入框中的光标垂直居中

height = padding + font-size; 这样通过padding方式达到的居中效果没有问题。如果高度是30px，字体大小是16px，设置line-height和字体大小相同，计算得上下内边距是7px。

 #willlearn-search {
        padding:17px 0;
        width: 709px;
        height: 56px;
        line-height: 22px;
        font-size: 22px;
        text-indent: 10px;
        margin-left: 120px;
        border: 1px solid #D7D7D7;
        outline: none;
        
    }