javascript - 两个几乎相等的jQuery函数；一种适用于IE，一种不适用

我在my homepage中包含了两个几乎相同的jQuery函数，它们应该增加或减小字体大小。

它们都可以在FireFox上正常工作，但是增加字体功能不能与Internet Explorer一起使用（它实际上可以工作一次，但不能多次工作）。

通常我会说我犯了一个错误，但是由于它可以与FireFox一起使用，所以我认为它与Internet Explorer有关。当然，我进行了常规研究，但没有发现任何相关内容。

我的问题是：有什么问题，是否有解决方案或解决方法？

这是我使用的代码：

jQuery(document).ready(function() {
    // Reset Font Size
    var originalFontSize = jQuery('html').css('font-size');
    jQuery(".resetFont").click(function() {
        jQuery('div#mainContainer').css('font-size', originalFontSize);
    });
    // Increase Font Size
    jQuery(".increaseFont").click(function() {
        var currentFontSize = jQuery('div#mainContainer').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum * 1.05;
        jQuery('div#mainContainer').css('font-size', newFontSize);
        return false;
    });
    // Decrease Font Size
    jQuery(".decreaseFont").click(function() {
        var currentFontSize = jQuery('div#mainContainer').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum * 0.95;
        jQuery('div#mainContainer').css('font-size', newFontSize);
        return false;
    });
});

非常感谢你。

最佳答案

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var originalFontSize = $('html').css('font-size');

            $('.resetFont').live('click', function () {
                $('div#mainContainer').css('font-size', originalFontSize);
            });

            $('.increaseFont').live('click', function () {
                $('div#mainContainer').css('font-size', (parseFloat($('div#mainContainer').css('font-size'), 10) * 1.05));
            });

            $('.decreaseFont').live('click', function () {
                $('div#mainContainer').css('font-size', (parseFloat($('div#mainContainer').css('font-size'), 10) * 0.95));
            });
        });
    </script>
    <style type="text/css">
        a
        {
            font-size: larger;
            font-weight: bolder;
            color: Green;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div>
        <a class="decreaseFont">A-</a> <a class="resetFont">A</a> <a class="increaseFont">A+</a>
    </div>
    <div id="mainContainer">
        Hi.. How r u? Testing... Teasting...
    </div>
</body>
</html>