1

フォントサイズを増減する2 つのほぼ同一の jQuery 関数をホームページに含めました。

どちらも FireFox では問題なく動作しますが、increaseFont 関数は Internet Explorer では動作しません (実際には 1 回は動作しますが、複数回は動作しません)。

通常は私がミスをしたと言うのですが、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 に答える