当前位置: 代码迷 >> HTML/CSS >> 关于浮动和position:absolute定位兼容有关问题
  详细解决方案

关于浮动和position:absolute定位兼容有关问题

热度:436   发布时间:2012-03-26 15:46:56.0
关于浮动和position:absolute定位兼容问题
各位大虾们,我写了一导航,但因技术有限,没有写得很好,好不容易在IE8下调试下调试正常,然后在FF和Chrome下测试也正常,但是一到IE6就出问题了,求帮助啊!实在是不知道怎么做了,所以求各位帮修改一下。(因为是环境要求必须写成行样式所以代码里面用了大量的行样式,基本上没有用到内嵌样式,所以请见谅了。
HTML code
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>????????</title>
<style type="text/css">
img { border:none;}
body{ margin:0; padding:0;}
#nav{ width:801px; height:31px; margin:0 auto; float:left}
#nav ul{ list-style-type:none; margin:0; padding:0;}
#nav ul li{ float:left; height:32px; line-height:32px; padding:0px; 10px; }
#nav ul li a{ display:block; width:89px; height:31px; line-height:31px; text-align:center; background:url(http://hi.csdn.net/attachment/201202/18/9345795_1329579948l7Aq.jpg) 0 0 no-repeat; font-size:14px; color:#FFF;}
#nav ul li a:hover{ background:url(http://hi.csdn.net/attachment/201202/18/9345795_13295799481Npq.jpg) 0 0 no-repeat;}
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
/*--------------------*/
.navman{ width:950px; height:150px;}
#navleft{ width:149px;; height:150px; float:left;}
#navright{ width:801px; height:150px; float:right;}
input{ background-color:#4f4f4f;}
</style>
</head>


<body>
<div class="navman" >
<div id="navleft"><img src="http://hi.csdn.net/attachment/201202/18/9345795_1329579948WrsA.jpg" alt="logo" /></div>
<!--???-->
<div id="navright">
<!--??????-->
<div style=" width:801px; height:94px; float:left;">
<img src="http://hi.csdn.net/attachment/201202/18/9345795_1329579948zJKP.jpg" alt="????" border="0" /></div>
<!--?м???-->
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">男&nbsp;&nbsp;裤</a></li>
<li><a href="#">女&nbsp;&nbsp;裤</a></li>
<li><a href="#">中老年裤</a></li>
<li><a href="#">儿童裤</a></li>
<li><a href="#">配饰皮带</a></li>
<li><a href="#">牛仔专区</a></li>
<li><a href="#">休闲专区</a></li>
<li><a href="#">商务专区</a></li>
</ul></div>
<!--?±?????-->
<div style="width:801px; height:25px; background-color:#212121; float:left;">
<div style=" width:237px; height:25px; float:left; background:url(http://hi.csdn.net/attachment/201202/18/9345795_1329579948jd22.jpg) no-repeat;">
<div style=" width:237px; height:25px;">
<form action="#" class="focus" method="get" name="SearchForm">
    <input name="userId" type="hidden" />
    <input name="shopId" type="hidden" value="69580797" />
    <input name="view_type" type="hidden" />
    <input name="order_type" type="hidden" />
    <input name="search" type="hidden" value="y" />
    <label for="J_ShopSKey"></label>
    <input name="keyword" class="text J_SEKeyword" style="border:0; width: 150px; height:14px; font-size:12px; color:#FFF; position:absolute; left: 206px; top: 130px;" maxlength="25" />
    <button class="button" style="border-bottom: 0px; border-left: 0px; width: 25px; background: url(http://hi.csdn.net/attachment/201202/18/9345795_1329579948jsku.jpg) no-repeat; height: 25px; border-top: 0px; cursor: pointer; float:right; border-right: 0px" type="submit"></button>
  </form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

 
  相关解决方案