chrome中的css填充问题（但不是在firefox中）

Question

我的chrome中的搜索栏填充有一个奇怪的问题。

css：

#searchbar {
    height: 15px;
    width: 135px;
    background: url("../img/search.png") no-repeat scroll 6px 6px rgba(0, 0, 0, 0);
    color: #ff8000;
    font-size: 0.9em;
    border: 1px dotted #ff8000;
    padding: 7px 9px 7px 32px;
    margin: 10px 0;
}

在Firefox中，它按预期工作，但chrome显示搜索栏而不应用填充：

我在这里可以改变什么想法？

编辑：我可以使用删除填充并增加搜索栏的宽度。但是，chrome和firefox之间仍存在不同宽度的问题。

Answer 1

从CSS中删除height: 15px声明以修复不同的高度。

然后添加以下内容以确保浏览器使用相同的框模型，这将修复Chrome和FF之间的宽度差异。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

http://jsfiddle.net/davidpauljunior/RAPqK/2/

关于盒子大小调整：http://css-tricks.com/box-sizing/

注意：正如Avall所说，这在IE7中不起作用。

Answer 2

我认为问题出在你的#searchbar上。确保它不是内联的。

display:block

或

display:inline-block;
#display:inline; /* IE7 */

内联元素中未定义垂直填充。

Answer 3

Box-sizing: border-box;是你最好的朋友。 - ＆GT; https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

http://jsfiddle.net/Bushwazi/JGb9A/1/