css - 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。我的按钮是橙色的。

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

顺便说一句，我已经添加

* {  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;

给父母。

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