css - 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;是你最好的新朋友。-> 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/