Css Firefox和Chrome的区别

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

---

如果你的.button是一个

按钮

这可能是mozilla的内部焦点。。。试试这个

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

---

Firefox和Chrome以完全相同的方式呈现

padding

。你的问题在别处

你在使用重置CSS吗？如果不是，默认的

行高

声明可能会干扰按钮的呈现

首先，你的

高度

远小于你的

字体大小

。由于没有指定

溢出

，因此

高度

将始终至少扩展到

字体大小

（或

行高

指定的任何值）

---

如果您的

.button

类实际上是一个

元素，也可以应用。

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

有关详细信息，请参阅此链接：

---

解决方案是使用填充而不是线条高度。

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

---

focus内部修复可以工作，但我也添加了负的顶部和底部边距，以使其达到正确的高度。e、 g:

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

---

我过去很喜欢火狐，但它已经变得一团糟，几年前就从我的圣诞清单上消失了

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

.button {
   padding:0;
}

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

---

你确定这不是一个

行高问题吗？如果你有一个演示页面，那会有帮助。在这个演示中，我看不出有什么不同，它是用Chrome额外填充的。你在应用什么标签
。按钮
？谢谢。。。浪费了2个小时，但如果没有这个答案，情况可能会更糟……；）这就解决了问题。。Mozilla在想什么|很抱歉花了这么长时间才接受这个答案。迷路了。非常感谢。在Firefox中，div的宽度/高度是给定的宽度/高度+填充。在其他浏览器中，填充不会将其添加到div的大小中。reset.css在呈现填充时扮演什么角色？我在wordpress中使用了一个子主题，我看到firefox和chrome的填充范围有所不同。@poepje：这是不正确的。Firefox使用W3CBox模型@Chirag：不同的浏览器对元素的默认样式有不同的值。css
将这些值标准化，以便您的基本样式在所有浏览器中都是相同的。