Firefox 和 Chrome 填充之间的区别答案

【问题标题】：difference between Firefox and Chrome paddingFirefox 和 Chrome 填充之间的区别
【发布时间】：2011-07-19 05:48:34
【问题描述】：

firefox 和 chrome 在 css 中渲染填充的方式有所不同。在 chrome 中显示正确的内容在 Firefox 中得到了额外的填充。有办法解决吗？

.button {
    font-family: helvetica, arial;
    font-size: 64px;
    width: 70px;
    height: 45px;
    font-weight: bold;
    padding: 0px;
    padding-top: 25px;
    background-color: #000;
    color: #fff;
    text-align: center;
    float: right;
    margin: 7px 10px 0 0;
}

【问题讨论】：

你确定这不是line-height 问题？
如果你有演示页面，那会有所帮助。
在这个演示中我看不出有什么区别jsfiddle.net/W22DC
在我看来，它是在 Chrome 中额外填充的。
您将.button 应用到什么标签？

标签： css

【解决方案1】：

如果您的 .button 是 button，这可能是 Mozilla 内部焦点的东西...试试这个？

.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }

【讨论】：

谢谢...浪费了 2 个小时，但如果没有这个答案，可能会更多... ;)
这解决了问题.. Mozilla 在想什么？ :|
很抱歉花了这么长时间才接受答案。迷失了方向。非常感谢。

【解决方案2】：

Firefox 和 Chrome 以完全相同的方式呈现 padding。你的问题在别处。

您是否使用了重置 CSS？如果没有，默认的 line-height 声明可能会干扰按钮的呈现。

一方面，您的height 比您的font-size 小得多。由于您没有指定overflow，因此您的height 将始终至少扩展到font-size（或您的line-height 指定的任何内容）。

如果您的.button 类实际上是<button> 元素，则也应用superUntitled fix。

【讨论】：

在 Firefox 中，div 的宽度/高度为宽度/高度+填充。在其他浏览器中，填充不会将其添加到 div 的大小。
reset.css在渲染padding中的作用是什么？我正在为 wordpress 使用子主题，并且我看到 Firefox 和 chrome 的填充程度不同。
@poepje：这不是真的。 Firefox 使用 W3C 盒子模型。 @Chirag：不同的浏览器对元素的默认样式有不同的值。 reset.css 标准化这些值，以便您的基本样式在所有浏览器中都相同。

【解决方案3】：

您实际上是正确的 - Firefox 中存在一个错误，即无法使用 CSS line-height 属性更改按钮元素的行高。

详情见此链接：http://www.cssnewbie.com/input-button-line-height-bug/

解决方案是使用填充而不是行高。

【讨论】：

【解决方案4】：

对我有用的方法是设置对象的高度，以便 firefox、chrome 和 opera 以相同的方式渲染它，并删除所有填充。

.footertext6{
    float: left;
    padding-top:10px;
    width: 160px;
    height:102px; */setting height here*/
    background-color:#ffffff;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 15px;
    border-top-right-radius: 50px;    
}

【讨论】：

【解决方案5】：

focus-inner 修复有效，但我还添加了负的顶部和底部边距以使其达到正确的高度。例如：

*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}

我曾经很喜欢 Firefox，但几年前它变得臃肿不堪，从我的圣诞清单上掉了下来。

【讨论】：

【解决方案6】：

你可以为firefox设置不同的填充

.button {
   padding:0;
}

@-moz-document url-prefix() {
    .button {
       padding:10px;
    }
}

【讨论】：