1

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

它们都可以在 FireFox 上正常工作，但 increaseFont 功能在 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;
    });
});​

非常感谢。

4

1 回答 1

0 
        <!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>
于 2012-04-18T15:11:09.940 回答