Webkit内核浏览器下搜索框大小及文字下沉问题
问题如下图所示(Safari或者Chrome等基于Webkit核心的浏览器):
由于很少使用基于Webkit内核的浏览器,比如Safari和Chrome什么的,以至于自己一直没有很好的重视这个问题,今天Prouz提出了这个问题,于是我便开始研究,但是随着研究的深入,发现问题也越来越多。
首先是在Webkit内核浏览器下搜索框特有的样式,通过Google的开发人员工具结合网上搜索发现这么一个Webkit的私有属性-webkit-appearance,关于这个的介绍可以看CSS Webkit Appearance这篇文章,其定义了input在Webkit浏览器下的各种表现,尤其在苹果的Safari浏览器下,比如搜索框是这个样子的:
这样就导致我们原先定义的样式全部失效,当然我们可以将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下产生怪异的高度了。