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 中不起作用。