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;

给 parent 。

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