Question

我使用以下脚本（需要jquery的cookies插件）允许启用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 { font-size：x-small; }

问题1：

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

WHY？

问题2：

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

Answer 1

好的，这很快，很有启发性。

提出问题的答案只有答案的一半......
IE无法将x-small解释为数字大小，这是Mozilla浏览器所做的。
由于我使用的脚本试图将px附加到font-size属性，最终得到：

的x smallpx

然后jQuery告诉你要离开。

更改为：

HTML { 字体大小：65％; }

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

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

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

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

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

JQuery Text调整大小不适用于IE

1 个答案: