Firefox 和 Chrome 之间 1 个像素的差异答案

【问题标题】：1 pixel difference between Firefox and ChromeFirefox 和 Chrome 之间 1 个像素的差异
【发布时间】：2013-08-12 14:09:23
【问题描述】：

我写了一个简单的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;
}

【问题讨论】：

父母的身高是怎么确定的？ Firefox 和 chrome 渲染文本略有不同，所以如果你让文本设置高度，它最终可能会有所不同。要解决这个问题，您需要在父元素上设置一个绝对高度。
也为父元素提供html/css。
@GeorgeYates 我没有父母的身高。我需要设置一个吗？

【解决方案1】：

为.button设置高度并添加

overflow:visible;

给父母。

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

【讨论】：