防止图片在浏览器中缩放

Question

5

我有一个垂直对齐的带按钮的单一图像。然后，我使用了指定“background-position”的CSS来显示基于按钮类的正确按钮。问题是，当用户按“cmd +”（或缩放浏览器）时，图像会“变大”，并且您会开始看到其他按钮（不同颜色）。如何使背景“固定”，以便它不随浏览器放大而放大。

预览: NORMAL: cl.ly/3d3y2D3c0D0A2T1n0f0G 和 ZOOOMED: cl.ly/1K2t450p2m3B2x133j04

奇怪的是，这种效果似乎只出现在Safari中（我已经测试了Chrome，Safari和Firefox）。

- willium

您是否有一个带有实时示例的链接？ - gnur

抱歉，不可以（保密协议）。如果内容有些复杂，我可以举个例子。 - willium

屏幕截图（可能带有模糊的文本）会非常有帮助！ - gnur

@gnur 确定，普通尺寸：http://cl.ly/3d3y2D3c0D0A2T1n0f0G 和放大尺寸：http://cl.ly/1K2t450p2m3B2x133j04。 - willium

你在用什么浏览器进行测试？ - Marcel

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Fletcher · Answer 1

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

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

或者，您可以使用CSS3而不是背景图像，并让IE拥有方形角落。

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

- gnur · Answer 2

看起来你正在遭受css-sprites出血问题的困扰。
这不是那么容易解决的，因为并非所有浏览器都以相同的方式进行缩放。

一个解决方法是将文本嵌入到按钮本身中，这将防止浏览器将文本放大超过按钮。但这有点违背了css sprites的初衷..

另一个解决方法是使用PHP脚本生成文本图像，然后将其放在按钮前面。这将防止缩放，同时保持当前系统的灵活性。

或者，您还可以制作一个包含所有要使用的按钮文本的sprite，并将这两个sprite组合起来显示所需的按钮。

- xkeshav · Answer 3

你在CSS中的background-position:属性中忘记写入所有必要的参数了。