标签归档：webkit

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

4

感谢Prouz的提出这个问题
问题如下图所示（Safari或者Chrome等基于Webkit核心的浏览器）：

搜索框错位

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

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

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下产生怪异的高度了。