[英]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.