javascript - Internet Explorer 无法正确显示 fiddle

Question

我希望我的网站能够在 Internet Explorer 上完美显示，但即​​使它可以在 Chrome 上运行，也不能在 IE 上运行。按钮文字被 chop ，图片分辨率低。
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

您必须向按钮添加一个 css 属性:

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