chrome 中的 CSS 按钮大小与 safari 不同（虽然都是 webkit 浏览器？）答案

【问题标题】：CSS button size in chrome different to safari (both webkit browsers though?)chrome 中的 CSS 按钮大小与 safari 不同（虽然都是 webkit 浏览器？）
【发布时间】：2011-07-19 13:08:55
【问题描述】：

我有一个基础 css，它在其他元素中将我的输入设置为：

  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;

我也有这个用于特定按钮的问题

header input[type=submit] { background:#383838; color:#FFF; padding:4px 5px; }

一切都很好，除了 Chrome 中的输入按钮，它的高度和宽度都比其他浏览器短 2 个像素（所以每边都有 1 个像素的差异）。更令人沮丧的是这并没有影响 safari，它也是一个 webkit 浏览器。

有什么想法吗？

干杯，阿迪。

【问题讨论】：

抱歉，我们会回复：接受。图片在这里（两者的样式相同）postimage.org/image/2vye375b8
我真的不想用js来浏览器嗅探和调整。非常适合单独对 css 进行排序（不能使用 line-height 'cos of FF bug）
您能在jsFiddle 或JS Bin 上复制它吗？另外，您使用的是什么操作系统？
jsfiddle.net/5kLEf（如果您在 chrome 和 safari 上查看，您可以看到尺寸差异）我在 Windows 7 上

标签： css google-chrome webkit

【解决方案1】：

buttons 和 inputs 被每个浏览器（填充、边距等）呈现（略微）不同。如果您希望在每个浏览器中获得完全相同的结果，您需要针对每个浏览器分别使用不同的样式规则。

【讨论】：

这就是我所担心的。 Ta 作为输入。

【解决方案2】：

您应该在样式表文档的第一个部分尝试 CSS 重置。一些浏览器采用默认样式..所以这也可能是一个问题

【讨论】：