跨浏览器 jQuery 文本缩放实现

发布于 2024-10-08 07:47:11 字数 653 浏览 8 评论 0 原文

我有一些代码可以增加/减小字体大小。这让我很头疼，因为每个浏览器似乎以不同的方式实现 $.css('font-size') （查看 jquery 错误）。不过，真正让我烦恼的是，Firefox 的缩放比例还不错，但当我使用下面的缩小功能时，它就会放大。 Webkit 和IE 都按预期工作。对此有什么想法吗？

我把它放在这里的小提琴中： http://jsfiddle.net/srQ3P/1/ 你在哪里可以看到它按预期工作，并且您可以在项目页面的 Firefox 中看到它损坏： http://cumberlandme.info/residents

主要编辑

抱歉，问题不是代码，而是 Firefox 的 bug 行为。当我使用浏览器控件（ctrl + plus 或 ctrol + minus）放大或缩小后，js 就会变得混乱。在其他浏览器中不会发生这种情况。这才是真正的问题。对此有什么建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清欢 2024-10-15 07:47:11

本例中的问题出在我的 javascript 文本缩放功能上。我使用的原始函数（在网上找到）在正文字体样式中查找特定的 em 值，如果没有找到，请将字体大小重置为“1em”。就像这样：

if (document.body.style.fontSize == "")
    document.body.style.fontSize = "1em";
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.1) + "em";

这在 IE 上可以正常工作（为什么，我不知道），但在 Ffx 上却不行。因此，我提出的解决方案是检查 IE，并根据浏览器是否为 IE，执行的操作略有不同。 jQuery 文档建议不要以这种方式检查浏览器，这是毫无意义的，但我还是这么做了！

var currSz = parseFloat($('body').css('font-size'));
Math.round(currSz);

if($.browser.msie)
    currSz++;
else
    currSz = currSz + .7;

$('body').css('font-size',currSz);

The problem in this case was with my javascript text zooming function. The original function I used (found online) looked for a specific em value in the body font style and if it did not find one, reset the font size to '1em'. Like so:

if (document.body.style.fontSize == "")
    document.body.style.fontSize = "1em";
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.1) + "em";

This worked (why, I don't know) okay on IE, but not Ffx. So the solution I came up with checks for IE and does things slightly differently based on if the browser is IE or not. It's worth nothing that the jQuery docs recommend against checking for the browser in this way, but I did it anyway!

var currSz = parseFloat($('body').css('font-size'));
Math.round(currSz);

if($.browser.msie)
    currSz++;
else
    currSz = currSz + .7;

$('body').css('font-size',currSz);

回复收藏 0 原文

~没有更多了~