簡體   English   中英

Internet Explorer無法正確顯示小提琴

[英]Internet explorer doesn't display fiddle correctly

我希望我的網站能夠在Internet Explorer上完美顯示,但即​​使它適用於Chrome,它也無法在IE上運行。 按鈕文本被截斷,圖片res很低。
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;
    }
    }

您必須向按鈕添加一個css屬性:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM