代码之家 › 专栏 › 技术社区 › awrigley

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

internet-explorer jquery

awrigley · 技术社区 · 15 年前

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:

问题2:

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

1 回复 | 直到 15 年前

awrigley 15 年前

好吧,那很快而且很有启发性。

IE无法将x-small解释为数字大小,这正是Mozilla浏览器所做的。
当我使用的脚本试图将px附加到字体大小属性时,您将得到:

因此jQuery告诉您不要这样做。

更改为:

html格式 }

解决了这个问题。这个值确实由IE计算为一个数字,因此jQuery很高兴。

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

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

剩下的问题是,我读到一些地方,希望使用x-small设置字体大小,然后使所有其他大小与之相关。所以我觉得这个字体有点裸露-规模:65%马尔基。。。

不过,由于可访问性问题是一个问题,因此必须解决这个问题。