我在我们网站的顶部有一个通用搜索栏,它在Chrome和Safari浏览器中都可以很好地工作。 Firefox的问题在于占位符文本对齐到了栏的底部,而不是中间。我知道占位符通常只是web-kit,但是这在FF中显示。见下图:搜索栏上的占位符文本在Firefox中未对齐
铬:
http://www.cl.ly/2N3k340744071s1x291f
FF:
http://www.cl.ly/1e16472P2p1w0G2E062I
,这里是与它一起去的代码。 HTML;
<form action="#" id="nav_search_form">
<p><input type="text" placeholder="Search Careers And People" class="search" id="nav_search_q" /></p>
<input type="submit" style="visibility:hidden;">
<script type="text/javascript">
$('#nav_search_form').submit(function() {
Company.SearchBox.search();
return false;
});
</script>
</form>
和CSS:
input.search {
border:1px solid #bdbdbd;
padding:7px 10px 0 30px;
font:13px/15px "Helvetica Neue", Helvetica, Arial, sans-serif;
background:url(images/search.png) no-repeat 0 center;
color:#525252;
width:190px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-o-border-radius:12px;
-ms-border-radius:12px;
-khtml-border-radius:12px;
border-radius:12px;
margin-top:17px;
margin-left: 0px;
}
input.search.placeholder {
color:#b3b3b3;
}
input.search:hover {
border-color:#8c8c8c
}
input.search:focus {
border-color:#39b2e5
}
忘了提,谢谢! – sthomps 2011-06-09 23:52:06