Firefox 填充无法正常工作答案

【问题标题】：Firefox padding not working properlyFirefox 填充无法正常工作
【发布时间】：2017-07-14 18:35:49
【问题描述】：

我有一个按钮。将填充应用于此按钮。但与 chrome 和 Firefox 的尺寸不同

使用Firefox 和chrome 运行下面的sn-p 你可以看到不同之处。如何纠正问题

button{
padding:5px 15px;
}

&lt;button&gt;hello&lt;/button&gt;

火狐版本54.0

铬

请不要标记为重复。我已搜索并尝试了许多相同的问题答案。但它不起作用

谢谢，

【问题讨论】：

你遇到这个问题的ffx版本，和chrome一样
使用重置 css, Normalize.css 让浏览器更一致地渲染所有元素。
无法重现，这些按钮在 Chromium 和 Firefox 中看起来大致相同。根据 DOM 检查器，通过用户代理样式表应用的默认边框宽度似乎有所不同；但对我来说，它看起来没有你的截图那么极端。
@ÁlvaroTouzón FF v 54.0
@CBroe 是否有覆盖边框宽度的选项？

【解决方案1】：

您希望使用 Normalise CSS 来确保您的 CSS 规则在所有主要浏览器中均等且一致地应用。

这将解决您的问题。如果问题仍然存在，请在您的问题（edit）中明确说明您使用了 normalize 以及您可能尝试过的任何其他 CSS 修复。

我被搜索并尝试了许多相同的问题答案。但它不起作用

请准确地描述你尝试了什么。

【讨论】：

【解决方案2】：

我从我的方式找到了答案。Its a font problem。不同的字体系列在 chrome 浏览器上有一些默认字体大小，与所有其他浏览器不同

button{
padding:5px 15px;
font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
}

&lt;button&gt;hello&lt;/button&gt;

【讨论】：

【解决方案3】：

也许你可以试试这段代码，我希望它能工作->

button {
  padding:5px 15px;
  -moz-padding:5px 15px;
}

【讨论】：