页面出现了个小问题，求教-慕课网

页面出现了个小问题，求教

来源：4-5 企业网站页码制作

serebi

2016-05-27 18:35

在chrome里面正常显示，在FF和IE里，导航左边的图片浮动到上面去了，请教怎么回事

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>慕课网</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/setHomeSetFav.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
    <script type="text/javascript" src="js/mf-pattern/mF_liquid.js"></script>
    <link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_liquid.css" />
    <script type="text/javascript">
     myFocus.set({
     id:"picBox"
     })
    </script>
</head>
<body>
<div>
   <div>
       <ul>
           <li><a href="#" id="contactUs">联系我们</a></li>
           <li><a href="#" id="setFav">加入收藏</a></li>
           <li><a href="#" id="setHomepage">设为首页</a></li>
       </ul>
   </div>
</div><!--top结束-->
<div>
<div>
<div>
   <a href="index.html">
<img src="images/logo.jpg" alt="慕课网" />
</a>
</div>
<div>
<img src="images/tel.jpg" alt="tel" />
电话热线:<span>123-456-7890</span>
</div>
</div><!-- logo结束 -->
<div>
<div></div>
<div>
<div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="list.html" target="_blank">关于慕课</a></li>
<li><a href="list.html" target="_blank">新闻动态</a></li>
<li><a href="list.html" target="_blank">课程中心</a></li>
<li><a href="list.html" target="_blank">在线课程</a></li>
<li><a href="list.html" target="_blank">人才招聘</a></li>
</ul>
</div>
<div>
<form action="" method="post">
<input type="text" name="search">
</form>
</div>
</div><!-- nav_mid结束 -->
<div></div>
</div><!-- nav结束 -->

*{
	padding: 0;
	margin: 0;
	font-size: 12px;
}

body{
	background-color: #f3f3f3;
}

.top{
	height: 27px;
	width: 100%;
	background: url("../images/top_bg.jpg") repeat-x;
}

.top_content{
	width: 1000px;
	height: 100%;
	margin: 0 auto;
}

.top_content li{
	float: right;
	list-style-image: url("../images/li_bg.gif");
	width: 70px;
	line-height: 27px;
}

.top_content a:link,.top_content a:visited{
	color: #8e8e8e;
	text-decoration: none;
}

.top_content a:hover,.top_content a:active{
	color: #900;
	text-decoration: none;
}

.wrap {
	width: 1000px;
	margin: 0 auto;
}

.logo {
	height: 83px;
	background-color: #fff;
	clear: both;
}

.wrap .logo .logo_left {
     width: 200px;
     float: left;
     padding-top: 
}

.wrap .logo .logo_right {
	width: 250px;
	float: right;
	margin-top: 25px;
}

.wrap .logo .logo_right img{
	vertical-align: middle;
}

.wrap .logo .logo_right span{
	color: red;
	font-family: '微软雅黑';
	font-size: 14px;

}

.wrap .nav{
    
	height: 40px;
}


.wrap .nav .nav_left{
	width: 10px;
	background: url("../images/nav_left.jpg") no-repeat;
}

.wrap .nav .nav_right{
	width: 10px;
	background: url("../images/nav_right.jpg") no-repeat;
}

.wrap .nav .nav_mid{
	width: 980px;
	background: url("../images/nav_bg.jpg") repeat-x;
}

.ad{
	clear: both;
}

.wrap .nav .nav_left,.wrap .nav .nav_right,.wrap .nav .nav_mid {
	height: 40px;
	float: left;
}

.wrap .nav .nav_mid .nav_mid_left{
	width: 680px;
}

.wrap .nav .nav_mid .nav_mid_right{
	width: 300px;
}

.wrap .nav .nav_mid .nav_mid_left,.wrap .nav .nav_mid .nav_mid_right{
   float: left;

}

.wrap .nav .nav_mid .nav_mid_left li{
	float: left;
	width: 100px;
	list-style-type: none;
	line-height: 40px;
	text-align: center;
}

.wrap .nav .nav_mid .nav_mid_left li a:link,.wrap .nav .nav_mid .nav_mid_left li a:visited{
	color: #fff;
	text-decoration: none;
	font-family: "Microsoft Yahei";
	font-size: 16px;
}

.wrap .nav .nav_mid .nav_mid_left li a:hover,.wrap .nav .nav_mid .nav_mid_left li a:active{
	color: #ff0;
	text-decoration: none;
	font-family: "Microsoft Yahei";
	font-size: 16px;
}

.wrap .nav .nav_mid .nav_mid_right .search_text{
	width: 230px;
	height: 20px;
	margin-top: 8px;
	background: url("../images/search.jpg") no-repeat right center;
	background-color: #fff;
	padding-right: 26px;
}

写回答关注