Question

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;
}

Answer 1

如果你的.button是button这可能是一个内心焦点的事情......试试这个吗？

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

Answer 2

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

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

首先，您的height小于您的font-size。由于您未指定overflow，因此height始终会扩展至font-size（或line-height指定的任何内容）。

如果您的.button课程实际上是<button>元素，请同时应用superUntitled fix。

Answer 3

焦点内部修复有效，但我还添加负顶部和底部边距以使其达到正确的高度。 e.g：

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

我曾经喜欢Firefox，但它已成为一个臃肿的混乱，几年前从我的圣诞节清单上掉了下来。

Answer 4

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

有关详细信息，请参阅此链接：http://www.cssnewbie.com/input-button-line-height-bug/

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

Answer 5

u可以为Firefox设置不同的填充

.button {
   padding:0;
}

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

Answer 6

对我有用的方法是设置对象的高度，以便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;    
}

Firefox和Chrome填充之间的区别

6 个答案: