css - Firefox 中的背景位置在我的 Mac 和其他 Mac 上有所不同

Question

我发生了一件非常奇怪的事情。

在我目前正在开发的网站上，社交和电子邮件按钮的背景定位在我的 Mac 与其他计算机之间存在很大差异。

这就是它在我的屏幕上以 1600 x 1000 分辨率显示的样子（我还检查了其他的，所以可能不是这样）

_{（来源：mikolajgrzyb.com）}

问题是：为什么会发生，我该如何解决这个问题（在每台计算机上正确显示）？

Answer 1

当您在 CSS 中定位背景时，您将 em 与 px 混合在一起，这可能是它看起来不同的原因。

.bluebtn {
    background: url("../images/icons.svg") no-repeat scroll 0 -2.7em transparent;
}

您应该只使用 em 来调整字体大小。

检查其中一些链接，了解何时使用什么：

• em, px, pt, cm, in…</a>
• 为什么是 em 而不是 px？

当您想要定义与当前字体中字符大小相关的内容时，应该使用em 。除非您已覆盖字体样式（例如使用 px 单位），否则这将受到用户浏览器或操作系统中字体选择的影响（如果他们已经制作了字体），因此将 em 用作一般长度单位是没有意义的除非您特别希望它随着字体大小的缩放而缩放。

有用的建议

预加载图像。第一次将鼠标悬停在您的按钮上会使它滞后。

你右边的列表很烦人。考虑一种更用户友好的方法，在鼠标移出后它不会向上滚动，请使用该click-to-open click-to-close方法。您现在使用的方法使得在列表项之间导航变得困难。
它似乎有时也会卡住。

考虑为非链接的文本使用不同于蓝色的颜色。对于习惯于蓝色链接文本的普通用户来说，这可能会让人感到困惑。

你拼错了处理、响应、切割、准备和布局。
I应始终大写。