为什么我的代码，IE8以下的可以显示正常。IE8以上页面就乱了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="style/main.css" />

</head>
<body>
<div class="navbar">
<div class="navbar-logo">
    <a href="#"><img src="images/logo.gif" alt="本筑" /></a>
</div>
</div>
<div id="menulogo" onclick="change()">
    <img src="images/menu.gif" width="100%" height="100%" alt="" />
</div>
<ul id="menubar">
    <li><a href="#">品牌</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
</ul>
<div class="mainbar">
    <div class="lunzi">
        <img src="images/lunzi.gif" width="100%" height="100%" alt="" />
        <div class="q-x textbox">
            <h2>曲线</h2>
            <b>还原树木天然之美</b>
        </div>
        <div class="z-b textbox">
            <h2>直板</h2>
            <b>无瑕疵芯材，卓绝工艺</b>
        </div>
        <div class="p-h textbox">
            <h2>拼花</h2>
            <b>专属定制，只为懂生活的您</b>
        </div>
    </div>
</div>

<script>
    function change() {
    var menulogo=document.getElementById('menulogo');
    var menubar=document.getElementById('menubar');
    menulogo.style.display='none';
    menubar.style.display='block';
}
</script>
</body>
</html>







/* reset */
@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { 
    padding: 0; 
    margin: 0; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
fieldset,img { 
    border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
    font-weight: normal; 
    font-style: normal; 
} 
ol,ul { 
    list-style: none; 
} 
caption,th { 
    text-align: left; 
} 
h1,h2,h3,h4,h5,h6 { 
    font-weight: normal; 
    font-size: 100%; 
} 
q:before,q:after { 
    content:”; 
} 
abbr,acronym {
    border: 0; 
}
input{border: none;}
a{text-decoration: none;}

/* 背景 */
html,body{width:100%;height: 100%;font-size: 16px;}
body{background-image: url(../images/beijing.jpg);background-size:cover;position: relative;font-family:"Microsoft YaHei",微软雅黑;}

/* 头部logo */
.navbar-logo{
    height: 50px;
    padding-top: 25px;
    padding-left: 30px;
}

.navbar-logo a img{
    display: block;
    width: 200px;
    position: fixed;
}


/* 按钮部分 */
#menulogo{
    /* display: none;  */
    position: absolute;
    height: 50px;
    width: 12px;
    margin:auto;
    top:0;bottom:0;left: 5px;
    cursor:pointer;
}
#menulogo img:hover{
    background-color: ##e3c18f;
    /* filter:alpha(opacity=0); 
        -moz-opacity:0; 
        opacity:0; */
} 
/* 菜单栏部分 */
#menubar{
    display: none;
    border-top:2px solid white;
    border-bottom:2px solid white;
    width: 100px;
    height: 100px;
    position: absolute;
    margin:auto;
    top:0;bottom:0;
}

#menubar li{
    display: block;
    height: 33.33px;
    line-height:33.33px;
    text-align: center;
}
#menubar li a{
    text-decoration: none;
    color: white;
}

#menubar li a:hover{
    color: #e3c18f;
}

/* 中间树环部分 */
.mainbar{
    width: 100%;
    height: 80%;
}
.lunzi{
    width:35%;
    height:80%;
    margin-left: 32.5%;
    margin-top: 3%;
    position:relative;
}
.textbox{
    position: absolute;
    width: 40%;
    height: 10%;
    z-index: 5;
    /* background: red; */
    text-align: left;
    letter-spacing:2px;
    color: white;
    cursor:pointer;
}

.textbox:hover{
    color: #e3c18f;
}

.lunzi .q-x h2 ,.lunzi .p-h h2,.lunzi .z-b h2 {
    font-size: 16px;
}

.lunzi .q-x b ,.lunzi .p-h b,.lunzi .z-b b{
    font-size: 12px;
}

.lunzi .q-x{
    text-align: right;
}
.lunzi .q-x{
    left: -40%;
    bottom:15%;
}

.lunzi .z-b{
    right: -41.5%;
    top:10%;
}
.lunzi .p-h{
    right: -35%;
    bottom: 6%;
}
请问下是哪里有问题呢？谢谢大神啦
天空雨了
浏览 1677回答 1
1回答

迷途的马尔斯
没问题，注意你浏览器的编码是不是UTF-8
0 0
随时随地看视频慕课网APP