Internet Explorer不显示小提琴正确

Question

我想完美地显示在Internet Explorer上我的网站，但即使它适用于Chrome不会在IE浏览器。按钮文字被切断，图片资料不足。
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; 
}