Firefox和Chrome之间有1个像素差异

Question

我写了一个简单的HTML。

<div class="button">button<div>

这行的css是

.button {
    background-color: #F1631F;
    position: absolute;
    bottom: 10px;
    left: 20px;
}

但是firefox和chrome之间存在一个像素区别。

左边是chrome，右边是firefox。我的按钮是橙色按钮。

有什么好的解决方案可以解决这个问题吗？

BTW，我已经添加了

* {  margin: 0; padding: 0; border: 0;}

在我的css文件开始时。

父html和css：

<div class="item">
    <div class="button"></div>
</div>

.item{
    margin-top: 25px;
    text-align: right;
}

Answer 1

设置.button的高度并添加

overflow:visible;

给父母。

您可能需要花一些时间来找到最适合您界面的高度。