JQuery Text Resizing不能与IE一起使用 [英] JQuery Text Resizing not working with IE

问题描述

我使用以下脚本（需要jquery的cookies插件）允许启用JavaScript的用户更改医疗慈善网站上的字体大小：

I am using the following script (that requires the cookies plugin for jquery) to allow javascript enabled users to change the font size on a medical charity website:

var sitefunctions = {
    textresize: function () {        
        var $cookie_name = "TextSize";
        var originalFontSize = $("html").css("font-size");
        // if exists load saved value, otherwise store it
        if ($.cookie($cookie_name)) {
            var $getSize = $.cookie($cookie_name);
            $("html").css({ fontSize: $getSize + ($getSize.indexOf("px") != -1 ? "" : "px") }); // IE fix for double "pxpx" error
        } else {
            $.cookie($cookie_name, originalFontSize);
        }
        // reset link
        $(".reset").bind("click", function () {
            $("html").css({ "font-size": originalFontSize });
            $.cookie($cookie_name, originalFontSize);
        });
        // text "+" link
        $(".increase").bind("click", function () {
            var currentFontSize = $("html").css("font-size");
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = currentFontSizeNum * 1.2;
            if (newFontSize, 11) {
                $("html").css({ "font-size": newFontSize });
                $.cookie($cookie_name, newFontSize);
            }
            return false;
        });
        $(".decrease").bind("click", function () {
            var currentFontSize = $("html").css("font-size");
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = currentFontSizeNum / 1.2;
            if (newFontSize, 11) {
                $("html").css({ "font-size": newFontSize });
                $.cookie($cookie_name, newFontSize);
            }
            return false;
        });
    }
}

然后你可以从你的页面调用它，如下所示：

You can then call it from your page like so:

       $(document).ready(function () {
            // show text resizing links
            $(".AccessibilityControls").show();
            sitefunctions.textresize();
        })

然后您可以在页面中放置一些链接，如下所示：

You can then put some links in your page like so:

<div class="AccessibilityControls" style="display:none;">            
        Text Size:<br />
        <a class="increaseFont" style="font-size: 14pt;" title="Increase Text Size" href="#" rel="nofollow">A+</a> | 
        <a class="decreaseFont" style="font-size: 11pt;" title="Decrease Text Size" href="#" rel="nofollow">A-</a> | 
        <a class="resetFont" href="#" rel="nofollow">Reset </a>
    </div>

到目前为止，非常好。上面提到你在html标签的样式表中设置了一个字体大小，如下所示：

So far, so good. The above presuposes you have set a font-size in a style sheet for the html tag as follows:

html
{
font-size：的x小;
}

html { font-size: x-small; }

问题1：

它适用于所有浏览器除了IE。

It works fine all browsers except IE.

为什么？！

问题2：

我在Firefox中调试很好，但这是一个IE问题！尝试将过程附加到VS调试器，但这似乎是间歇性地工作...

I am fine debugging in Firefox, but this is an IE problem! Have tried attaching the process to the VS debugger, but this seems to work intermitently...

推荐答案

好的，这很快，有礼貌的。

OK, that was quick and instructive.

1. 提出问题的答案只有答案的一半......

1. Asking the question is half the answer...

IE无法将x-small解释为数字大小，这是Mozilla浏览器所做的。

IE is not able to interpret x-small as a numerical size, which is what the Mozilla browsers do.

作为脚本，我是使用try将px附加到font-size属性，最终得到：

As the script I am using tries to attach a px to the font-size property, you end up with:

x-smallpx

x-smallpx

然后jQuery告诉你要关闭。

Whereupon jQuery tells you to naff off.

更改为：

html
{
font-size：65％;
}

html { font-size:65%; }

解决了这个问题。这确实被IE评估为一个数字，因此jQuery很高兴。

solved the issue. This does get evaluated to a number by IE and so jQuery is happy.

我仍然对Visual Studio和js调试感到困惑。似乎有很多方法可以让猫皮肤一直没有效果。

I am still confused by Visual Studio and the js debugging. There seem to be many ways to skin the cat and none work all the time.

昨天第一次遇到这个问题，我很放心让它解决并找到了如何在IE中调试。双重打击。

Having first encountered this problem yesterday, I am relieved to have it solved and to have found how to debug in IE. Double whammy.

我留下的问题是我已经读过某个地方，希望使用x-small设置字体大小然后再制作其他所有字体相对于那个尺寸。因此，这个字体大小让我感觉有点赤裸：65％malarkey ...

The problem I am left with is that I have read somewhere that it is desirable to use x-small to set the font-size and then make all other sizes relative to that. So am left feeling a bit naked by this font-size:65% malarkey...

仍然需要解决这个问题，因为Accessiblity问题是一个问题。

Still, will have to work around that as the Accessiblity issues are an issue.

这篇关于JQuery Text Resizing不能与IE一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！