html - 防止图像随浏览器缩放

Question

我有一张图片，其中的按钮垂直对齐。然后我使用指定“背景位置”的 css 来根据按钮的类别显示正确的按钮。我遇到的问题是，当用户按下“cmd+”(或缩放他们的浏览器)时，图像“变大”并且您开始看到其他按钮(不同颜色)。如何使背景保持“固定”，使其不会随浏览器放大。

提前致谢!

这是 CSS:https://gist.github.com/b5d52ab2a2f84ed82fb4

预览:正常:cl.ly/3d3y2D3c0D0A2T1n0f0G 和缩放:cl.ly/1K2t450p2m3B2x133j04

奇怪的是，这种效果似乎只出现在 Safari 中(我已经测试过 chrome、safari 和 firefox)

Answer 1

我没有看到为您的图像容器指定的明确宽度或高度。某些浏览器可能依赖于此来正确调整大小。

您可以尝试设置 px 值，如果这不起作用，请尝试 em，因为它是相对于基准字体大小的度量。

或者，您可以使用 CSS3 代替背景图片，只让 IE 有方 Angular 。

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background: url(sweet-gradient.png) top left no-repeat;