CSS：Chrome 中按钮的大小与 Firefox 不同答案

【问题标题】：CSS: Size of buttons in Chrome is different than FirefoxCSS：Chrome 中按钮的大小与 Firefox 不同
【发布时间】：2011-02-26 15:12:49
【问题描述】：

我有以下 HTML 代码：

<style type="text/css">
.submitbutton{margin-left:-2px;padding:1px}
</style>
...
<form> 
... 
<input class=submitbutton type=submit value="Create Listings" /> 
</form>

在 Firefox 中，输入按钮的内边距比 Chrome 中的多。

有什么想法吗？

更新：如果您想知道为什么我有负边距 - 这是因为在输入字段和输入按钮之间 - 空间太大。

【问题讨论】：

您是否尝试过通过样式显式设置宽度？

标签： html css firefox google-chrome

【解决方案1】：

/* Remove button padding in FF */
button::-moz-focus-inner {
    border:0;
    padding:0;
}

您将在 Chrome 和 Firefox 中获得相同的按钮外观。

【讨论】：

我发现我还必须给出负边距才能让 Firefox 按钮与 Chromium 按钮匹配。
我不得不为此给你一个 +1，非常有帮助！为什么在 Firebug 中看不到 Mozilla 专有的伪类？？？ Chrome 有它们。
+1，因为它似乎删除了按钮文本上的一些随机水平“填充”，但我仍然在不应该存在的文本上方和下方得到 1px。
{ "为什么你在 Firebug 中看不到 Mozilla 专有的伪类??? Chrome 有它们" } DOM Inspector 插件可以
你也无法在 Firefox 的内置开发者工具中看到这些东西。

【解决方案2】：

即使您作为开发人员在不同的浏览器中进行测试并看到按钮的差异，用户也不会。将注意力集中在用户不会注意到的事情上太容易了：用户可能拥有 Firefox、IE 或 Chrome，但不是全部。用户很少会随着时间的推移切换浏览器，更不用说在它们之间切换并抱怨几个像素差异了。

因此，如果您一次只考虑一个浏览器中的按钮和体验，并且如果它在该体验/浏览器中运行良好，那么不要费心花更多时间。而是继续下一步。

这没有回答“为什么”，但其他人对此进行了解释。

【讨论】：

虽然这是真的并且我同意它（我每天都使用这个前提），但按钮大小会影响页面的可用性和可访问性。考虑到这些，较大的按钮目标可能非常有价值。
如果您的按钮是独立的，这可能是一个很好的解决方案。但是，一旦它紧挨着其他应该具有相同高度并在底部对齐的元素，您的布局就会中断。

【解决方案3】：

根据操作系统和/或浏览器的不同，表单元素呈现不同（默认）。如果您希望表单元素（输入字段、提交按钮等）在所有情况下看起来都相同，则必须使用边框、填充和边距显式设置它们的样式。

【讨论】：

所以我只是添加了填充，它仍然没有帮助
就像我说的你仍然需要设置边框等。如果你想要一个看起来像 SO 中的“添加评论”按钮的按钮，它有边框：1px solid #000，侧面填充大约 5px，#ccc 的背景颜色。（抱歉，所有近似值都在我头顶上：P）
您的意思是“发布您的答案”按钮？

【解决方案4】：

试试这个

/* Browser Firefox to match the Chrome */
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
}

【讨论】：

【解决方案5】：

这里没有人提到的是 Chrome 会重置这些元素的 CSS：

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button

因此，据我所知，无论您将填充设置为什么，它都会被 Chrome 覆盖。我尝试过使用!important 以及其他技术，但仍然没有运气。如果有人对此有任何见解，我很想知道。

【讨论】：

这里“发布您的答案”按钮的外观被覆盖。

【解决方案6】：

尝试使用-webkit-box-sizing:content-box，然后阅读有关盒子模型的信息。

【讨论】：

【解决方案7】：

我现在尝试同时修改高度和内边距。

结果还不错。似乎对于两种浏览器（Linux 中的 FF 和 Chrome）都是正确的......例如我已经放了：

.classname {
height:20px;
    padding:4px;
}

也许这只是我的幸运日……不过你可以试试。

【讨论】：

【解决方案8】：

要在两个浏览器上获得相同的大小，您必须为所有 CSS 元素设置相同的初始值，例如重置。

这就是我解决问题的方法：把它放在你的css文件的开头

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a
    {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      border-top-width: 0px;
      border-right-width-value: 0px;
      border-bottom-width: 0px;
      border-left-width-value: 0px;
    }

现在您必须修复页面上的一些方面更改，但它在所有浏览器上看起来几乎相同。

【讨论】：