Firefox和Chrome填充之间的区别

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这可能是一个mozilla内心焦点的事情...试试这个？

.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修复.