JQuery 文本调整大小不适用于 IE

Question

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

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;
        });
    }
}

然后你可以像这样从你的页面调用它：

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

然后您可以像这样在页面中放置一些链接：

<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 标签设置了字体大小，如下所示：

html { 字体大小：x-small； }

问题 1：

除了 IE 之外的所有浏览器都可以正常工作。

为什么？！

问题 2：

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

Answer 1

好的，那是快速而有启发性的。

1. 问问题是成功的一半……

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

3. 由于我正在使用的脚本尝试将 px 附加到 font-size 属性，您最终会得到：

x-smallpx

于是 jQuery 告诉你别闹了。

改为：

html { 字体大小：65%； }

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

我仍然对 Visual Studio 和 js 调试感到困惑。似乎有很多方法可以给猫剥皮，但没有一种方法始终有效。

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

我留下的问题是，我在某处读到最好使用 x-small 来设置字体大小，然后使所有其他大小与此相关。所以我觉得这个 font-size:65% malarkey 有点赤裸裸...

仍然必须解决这个问题，因为可访问性问题是一个问题。