Изменение размера текста в JQuery не работает с IE

Question

Я использую следующий сценарий (для которого требуется плагин cookie для jquery), чтобы разрешить пользователям с поддержкой 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.

ПОЧЕМУ ?!

ПРОБЛЕМА 2:

Я хорошо отлаживаю в Firefox, но это проблема IE!Попытался подключить процесс к отладчику VS, но, похоже, это работает с перебоями ...

Answer 1

ОК, это было быстро и поучительно.

1. На вопрос наполовину ответ ...

2. IE не можетинтерпретировать x-small как числовой размер, что и делают браузеры Mozilla.

3. Поскольку используемый мной скрипт пытается присоединить px к свойству font-size, вы в итоге получаетес:

x-smallpx

После чего jQuery сообщает вам отключить.

Изменение на:

html {font-размер: 65%;}

решил проблему.Это действительно оценивается числом IE, и поэтому jQuery доволен.

Я все еще смущен Visual Studio и отладкой js.Кажется, есть много способов очистить кошку, и ни один из них не работает все время.

Впервые столкнувшись с этой проблемой вчера, я рад, что решил ее и нашел, как отладить в IE.Двойной удар.

Проблема, с которой я остаюсь, заключается в том, что я где-то читал, что желательно использовать x-small, чтобы установить размер шрифта, а затем сделать все остальные размеры относительно этого.Поэтому я чувствую себя немного обнаженным из-за этого размера шрифта: 65% маларки ...

Тем не менее, мне придется обойти это, поскольку проблемы с Accessiblity являются проблемой.