Internet explorer doesn't display fiddle correctly

Question

I want my website to be displayed perfectly on internet explorer but even though it works on chrome it doesn't work on IE. The button text is cut off and the picture res is low.
http://jsfiddle.net/clarinetking/2PGZS/50/

<div id='FixedMenu'>
<button class='MenuItem'>Home</button>
<button class='MenuItem'>About</button>
<img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
<button class='MenuItem'>Tools</button>
<button class='MenuItem'>Events</button>
<img  


$(document).ready(function () {
var position = 0;
$('#CloseMenu').click(function () {
    position += 180;
    $('#FixedMenu').toggleClass('active');
    $('#Main, .MenuItem').fadeToggle();
    $('#CloseMenu').toggleClass('opacite');
    $('#CloseMenu').css({
        '-webkit-transform': 'rotate(' + position + 'deg)',
            '-moz-transform': 'rotate(' + position + 'deg)',
            '-o-transform': 'rotate(' + position + 'deg)',
            '-ms-transform': 'rotate(' + position + 'deg)',
            'transform': 'rotate(' + position + 'deg)'
    });
});
}); 


    #Main {
    vertical-align:middle;
    height:50px;
    width:60px;
}
#FixedMenu {
    position:fixed;
    margin:0 auto;
    top:0%;
    left:0%;
    background:#444444;
    width:100%;
    padding-right:80px;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    height:70px;
    line-height:70px;
    transition: all 1s;
    text-align:justify;
}
#FixedMenu:after {
    content:'';
    display:inline-block;
    width:100%;
}
#FixedMenu.active {
    background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
    height:40px;
    width:80px;
    vertical-align:middle;
}
#Start {
    margin-top:100px;
}
#CloseMenu {
    width:70px;
    height:70px;
    transition: all 1s;
    vertical-align:middle;
    position:fixed;
    right:0;
}
#CloseMenu.opacite {
    opacity:0.2;
}
@media all and (max-width: 496px) {
    button.MenuItem {
        width: 47px;
        font-size:60%;
    }
}
@media all and (max-width: 365px) {
    #FixedMenu {
        display:none;
    }
}
@media all and (min-width: 800px) {
    button.MenuItem {
        font-size:150%;
        width:120px;
    }
    }

Answer 1

You have to add one more css property to the buttons:

button.MenuItem {
    height:40px;
    width:80px;
    vertical-align:middle;
    line-height:normal;  //<------add this or line-height:40px;
}