Text font size incresing decreasing and reset

two nearly equal jQuery functions; one works with IE, one doesn't

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 <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...
        <p>
        teste
        </p>
        <h1>teste</h1>
    </div>

CSS

a
        {
            font-size: larger;
            font-weight: bolder;
            color: Green;
            margin: 0 10px;
        }

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));
            });
        });