chrome中的css填充问题（但在Firefox中没有）答案

【问题标题】：css padding issue in chrome (but not in firefox)chrome中的css填充问题（但在Firefox中没有）
【发布时间】：2013-11-02 02:24:35
【问题描述】：

我在 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 之间的宽度仍然存在不同的问题。

【问题讨论】：

你能在 jsfiddle 中显示这个吗？

标签： css google-chrome firefox padding

【解决方案1】：

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

然后添加以下内容以确保浏览器使用 same 框模型，这将修复 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 中不起作用。

【讨论】：

box-sizing 在这里完全没有必要，IE7 也不支持。 display 就足够了。
OP 说“有什么想法可以在这里改变吗？”这是一个想法。
一点也不，很有趣！我根本不想变得困难。在你提到它之后，我试图使用display: inline-block 来解决宽度问题，但无法让宽度从 Chrome 到 FF 显示相同？ jsfiddle.net/davidpauljunior/RAPqK/5
好吧，我必须承认你赢了。 input 是一个棘手的问题，display:block 在这些 Web 浏览器中的解释是不同的。 box-sizing 在 FF 和 Chrome 中也是如此。不过这很奇怪。我习惯于使用外部填充来宽度，而不是内部。我尝试在 input 和 div 上使用 box-sizing 和显示，但它们完全不同.....
表单是一个奇怪的世界。我删除了我的一个 cmets，因为它误导了答案。对于 cmets 现在的流量有点奇怪，我深表歉意

【解决方案2】：

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/

【讨论】：

【解决方案3】：

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

display:block

或

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

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

【讨论】：