Webkit内核浏览器下搜索框大小及文字下沉问题

问题如下图所示(Safari或者Chrome等基于Webkit核心的浏览器):

Webkit内核浏览器下搜索框大小及文字下沉问题

由于很少使用基于Webkit内核的浏览器,比如Safari和Chrome什么的,以至于自己一直没有很好的重视这个问题,今天Prouz提出了这个问题,于是我便开始研究,但是随着研究的深入,发现问题也越来越多。

首先是在Webkit内核浏览器下搜索框特有的样式,通过Google的开发人员工具结合网上搜索发现这么一个Webkit的私有属性-webkit-appearance,关于这个的介绍可以看CSS Webkit Appearance这篇文章,其定义了input在Webkit浏览器下的各种表现,尤其在苹果的Safari浏览器下,比如搜索框是这个样子的:

Webkit内核浏览器下搜索框大小及文字下沉问题

这样就导致我们原先定义的样式全部失效,当然我们可以将input的type="search"改成type="text"来解决这个问题,当然这是一种偷懒的做法,也不符合HTML5的定义,当然对于HTML5定义的表单可以参考A Form of Madness这篇文章,这篇文章作者告诉我们可以通过定义-webkit-appearance:textfield来解决这个问题,不过也有网友建议使用-webkit-appearance:none。

1
2
3
input[type="search"] {
    -webkit-appearance: textfield;
}

问题是解决了,但是发觉在Webkit核心下搜索框高度无法和其他内核浏览器一样,这是个很奇怪的问题,同样的也导致了搜索文字的下沉,也就是Prouz所反映的情况,通过调用Chrome开发人员工具,找到问题所在。

1
2
3
4
.search {
    height:20px !important;
    height:21px;
}

一个为了兼容IE6的写法,开始以为是!important导致的,但是后来发现如果height有覆盖属性搜索框就一定会有个怪异的高度。

后来通过搜索得到CSS Tricks的WebKit HTML5 Search Inputs,但是感觉其只是描述了问题所在,没有给出个较好的解决方案,当然也没有用到属性覆盖,试了下这篇文章下面网友评论的方法,就是禁用Webkit搜索表现特性:

1
2
3
4
5
6
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

但是问题依旧,这个问题只能先放这儿,改天详细研究,目前给搜索框留了个高度,去掉!important覆盖,然后改小了padding值,于是搜索框稍稍正常些,但是细心的网友会发现其实还是有几像素的区别,但是至少不会在Chrome和Safari下产生怪异的高度了。

相关推荐